-3

I was wondering how to have the value of the range to show up when scrolling the range input

<form action="#">
                                                  <h5>The Temperature</h5>
                                                  <!--the temperature-->
                                                    <p class="range-field">
                                                      <input type="range" id="temp" min="0" max="100" />

                                                    </p>
Tevin Thuku
  • 437
  • 1
  • 8
  • 19
  • This article may help: http://www.webdevbydoing.com/whats-the-difference-between-static-relative-absolute-and-fixed-positioning/ – Nikhil Dec 10 '15 at 07:32
  • you can find the solution here too. Use the search function next time: http://stackoverflow.com/questions/4457790/difference-between-style-positionabsolute-and-style-positionrelative – Sebastian Brosch Dec 10 '15 at 07:37
  • 1
    After reading the code, I found that one can use `M.Range.init(document.getElementById("your_input_id"))` to initialize the range slider to have the value appear during scrolling. Moreover, I don't think this is a duplicate question since this is regarding a poorly documented function of Materialize Framework. – 8749236 Mar 11 '19 at 16:28

1 Answers1

1

When working with position: relative; the way the object in question is positioned is indeed relative to page margins of your document or relevant container. So for example, of you had a header that you wanted to be positioned in the upper left hand corner of the screen, then the code may look something like this.

h1 {
position: relative;
top: 5px;
right: 5px;
}

Now compare that to position: absolute; where elements are positioned in relation to the browser window or parent element. So while relative positioning does not affect any other elements other than what is specifically targeted, absolute positioning can result in overlapping elements because objects are being placed in specific locations. If you wanted to position an image in the lower right corner of the screen, for instance, your code may look something like this.

img {
position: absolute;
bottom: 0px;
right: 0px;
}
Mr.M
  • 1,472
  • 3
  • 29
  • 76