Foundation - Slider



Sliders are very useful for setting certain values inside a range. The following table shows the various sliders used in Foundation.

Sr.No. Slider & Description
1 Basics

The basic slider has a handle and an active fill.

2 Vertical

It is used to display vertical slider by using verticle class.

3 Disabled

By using disabled class you can disable the slider.

4 Two Handles

To use two handles you need to use .slider-handle span and input field.

5 Data binding

You can use this to display a visible input and a slider, so that changing one of them will match other one.

6 SASS Reference

You can change the styles of the components by using SASS Reference.

7 JavaScript Reference

Foundation provides JavaScript components for the sliders.