Foundation slider

Foundation slider allows the user to select the range of values ​​by dragging:

Slider by using <div class="range-slider" data-slider> " data-slider> Create. In the <div> inside, add two <span> element: <span class="range-slider-handle"> Create a rectangular slider (blue background), <span class="range-slider-active-segment"> in the gray bar slider after the slider area.

Note: The slider requires JavaScript. So you need to initialize oundation JS:

Fillet and disable slider

Use .radius and .round classes to add rounded corners slider. Use .disabled class to disable the slider:

Vertical slider

Use .vertical-range classes and data-options="vertical: true;" ;" to create a vertical slider:

Slider value

By default, the slider bar in the middle of (a value of "50"). You can add data-options="initial: num " " to modify the default value of the property:

Display slider value

If we need to drag the slider value when the real-time display, can be obtained by <div> Add the data-options="display_selector:# id " id matches the id attribute and the value of the slider element, as examples:

Combination of data options

The following example uses display_selector and initial data options:

Step? Long

By default, the slider is moved to reduce the increase in the number "1." You can add data-options="step: num ;" ;" attribute to modify the step value?. Example is set to 25:

Custom interval

By default, the value in the range of "0" to "100." You can add-Options Data start and end to set interval values. The following examples set the interval value of "1" to "20":

Using the grid

Use the following to use the slider in the grid:

Use Input

The following example uses the <input> replace <span> to display the value of the slider: