Foundation Slider

Foundation slider allows users to select a range value by dragging:

The slider can be created by using<div class="range-slider" data-slider>Create. In<div>Inside, add two<span>Element:<span class="range-slider-handle">to create a rectangular slider (blue background),<span class="range-slider-active-segment">It is the gray horizontal bar behind the slider, which is the slider's drag area.

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

rounded corners and disabled slider

Usage.radiusand.roundclass to add rounded corner sliders. Use.disabledclass to disable the slider:

vertical slider

Usage.vertical-rangeclass anddata-options="vertical: true;"to create a vertical slider:

slider value

By default, the slider is placed in the middle of the bar (value "50"). This can be changed by addingdata-options="initial: num"attribute to modify the default value:

display slider value

If we need to display the value in real time while dragging the slider, we can do so by adding it in the <div>Add todata-options="display_selector:#id"attribute and the element's id value matches the slider's id, as in the following example:

combined data options

The following example usesdisplay_selectorandinitialdata options:

step

By default, the amount of increase or decrease when sliding the slider is "1". This can be changed by addingdata-options="step: num;"attribute to modify the step value. In the example, it is set to 25:

custom range

By default, the range value is from "0" to "100". This can be changed by adding data-optionsstartandendto set the range value. The following example sets the range value from "1" to "20":

use grid

The following is for using the slider in a grid:

Use Input

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