Range Slider
Menu Range Slider
 

Range Slider

My goal was to use the Ranger Slider and adapt it to select dates

Below is the example of the Range Slider taken from the W3C website.

I was looking at this at the same time that I was looking at webkit, this is why there is a link to my discussion on it. The code for the slider does not use webkit.

The Example

Drag the slider to display the current value.

Value:

The HTML code

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
Top

There is also the CSS for the class "slidecontainer".

Links

Top

References: - a note on these

  • W3C crib - https:// www.w3schools.com/howto/ howto_js_rangeslider.asp

Site design by Tempusfugit Web Design -