Foundation Sliders

Foundation Sliders allow users to select a range value by dragging: A slider can be created using `

`. Inside the `

`, add two `` elements: `` creates the rectangular slider (blue background), and `` is the gray horizontal bar behind the slider, which represents the slider's draggable area. **Note:** Sliders require JavaScript. So you need to initialize Foundation JS: ### Example

$(document).ready(function() { $(document).foundation(); }) [Try it »](#) * * * ## Rounded and Disabled Sliders Use the `.radius` and `.round` classes to add rounded sliders. Use the `.disabled` class to disable the slider: ### Example

...

[Try it »](#) * * * ## Vertical Sliders Use the `.vertical-range` class and `data-options="vertical: true;"` to create a vertical slider: ### Example

[Try it »](#) * * * ## Slider Value By default, the slider is placed in the middle of the horizontal bar (value is "50"). You can modify the default value by adding the `data-options="initial: num"` attribute: ### Example

[Try it »](#) ### Display Slider Value If we need to display the value in real-time while dragging the slider, we can add the `data-options="display_selector:#id"` attribute inside the

and match the element id value with the slider's id, as shown in the following example: ### Example

[Try it »](#) ### Combining Data Options The following example uses the `display_selector` and `initial` data options: ### Example

[Try it »](#) ### Step By default, the amount of increase or decrease when sliding the slider is "1". You can modify the step value by adding the `data-options="step: num;"` attribute. In the example, it is set to 25: ### Example

[Try it »](#) ### Custom Range By default, the range value is from "0" to "100". You can set the range value by adding the data-options `start` and `end`. The following example sets the range value from "1" to "20": ### Example

[Try it »](#) ### Using Grid The following demonstrates using a slider within a grid: ### Example

[Try it »](#) ### Using Input The following example uses `` instead of `` to display the slider's value: ### Example

[Try it »](#)

YouTip

Foundation Sliders

📂 Categories