How to Work with Slider in CSS3 - dummies

How to Work with Slider in CSS3

By John Paul Mueller

Sliders give the user the capability to input a value visually — as part of a whole. In CSS3, a slider ensures that the user inputs a correct value within a range of values, so you don’t need to worry about security issues or incorrect values. As a result, sliders provide a valuable means of allowing variable input.

The following example shows how to use a slider in your application. It begins with the HTML used to define the location and basic appearance of the slider. (You can find complete code for this example in the Chapter 06Widgets folder of the downloadable code as Slider.HTML.)

<h1>Using the Slider Widget</h1>
<div id="Slider">
 <span id="Left">0</span>
 <span id="Right">50</span>
<div>Value: <span id="Value"></span></div>

The slider has a minimum value of 0 and a maximum value of 50. The slider also uses the following CSS to give the output a more pleasing appearance and to make it possible to mark the beginning and ending of the scale.

<style type="text/css">
 width: 50%;
 margin: 30px;
 position: absolute;
 top: 15px;
 left: -5px;
 position: absolute;
 top: 15px;
 left: 99%;

As you can see, the CSS places the beginning and end of the scale in a particular position so that it matches the size of the slider. As far as the user knows, the scale and the slider are one piece, but they’re actually two pieces in the code. The remaining piece of the code is the script shown here.

  // Set the maximum slider value.
  max: 50,
  // Perform tasks when the value changes.
  change: function(event, ui)
  // Display the current slider value.

In this case, the code sets the maximum slider value to 50. The minimum value defaults to 0. However, you can set both the maximum and minimum values to any position. Even though the example doesn’t show it, the Slider can have more than one handle, so it can represent a range. This flexibility means that you can ask the user to input both a starting and a stopping point.

One of the most commonly used events is change. The example displays the new value each time the user finishes moving the handle. However, the way in which you use the output depends on your application. Generally, you use the output to provide data input or application control. However, it’s a good idea to display the actual slider value so the user knows the actual input value.