Sun Dial Menu
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

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links toother websites.

The External link is disabled to on this page, please visit other pages

Unlike most genealogical research websites tempusfugit.me.uk does not attempt to get you to "sign-up" when you click on one of their links.

This Wikipedia link is disabled.

The link on Wikipedia was to:

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links to other websites.

The External link is disabled to on this page, please visit other pages

Top

External Links - references

  • W3C crib - 🔗 - for the Range Slider code

Site design by Tempusfugit Web Design -