--- title: Slider description: This handy lil slider is perfect for setting specific values within a range. sass: scss/components/_slider.scss js: js/foundation.slider.js video: 'i_BTQiXBvhU' tags: - range --- ## Basics Create a slider by adding the class `.slider` and the attribute `data-slider` to a container element. You should also define both a starting and maximum value for the slider. Inside the container are three elements: - The handle (`.slider-handle`), which the user drags. - The fill (`.slider-fill`), which resizes dynamically based on where the handle is. - A hidden ``, which is where the value of the slider is stored. The `data-initial-start=""` value is where along the slider the handle starts. The `data-end=""` is the maximum value for the slider. In the below example, starting at 50 of 200 means the slider handle will start at 25% of the total.
```html_example ``` --- ## Vertical To get *vertical*, just add a `.vertical` class and `data-vertical="true"` the slider. ```html_example ``` --- ## Disabled Add the class `.disabled` to disable interaction with the slider. ```html_example ``` --- ## Two Handles Two-handle sliders can be used to define a range of values, versus a single value. To make a two-handle slider, add a second handle, and a second ``. This works with horizontal and vertical sliders. You can add IDs to the ``s inside the sliders to make it easier to access the values. If you don't, the plugin will add an ID to each for you. Note that the first handle manipulates the first ``, while the second handle manipulates the second ``. ```html_example ``` --- ## Data Binding Data binding allows you to connect the slider to an external `` field. With data binding set up, dragging the handle will change the value inside the text field, and editing the number in the text field will move the slider in real-time. To set it all up, create an `` with an ID and add `aria-controls="id"` to the slider handle, where `id` is the ID of the ``. ```html_example