A fun implementation of the slider widget, which can be very useful in certain applications, is the color slider. Let's put what we've learned about this widget into practice to produce a basic color-choosing tool. The following screenshot shows the page that we'll be making:
In your text editor, alter the <body>
markup in slider1.html
to the following code:
<div id="container" class="ui-widget ui-corner-all ui-widget-content ui-helper-clearfix"> <label>R:</label> <div id="rSlider"></div><br> <label>G:</label> <div id="gSlider"></div><br> <label>B:</label> <div id="bSlider"></div> <div id="colorBox" class="ui-corner-all ui-widget-content"></div> <label for="output" id="outputLabel">Color value:</label> <input id="output" type="text" value="rgb(255,255,255)"> </div>
Let's now add in the script
functionality for our demo...