> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/slider.md).
# Slider
Sliders allow users to adjust values within a specified range by dragging a handle along a track. They provide a quick and intuitive way to set values for inputs.
## Overview
Sliders are ideal for visually representing and adjusting a continuous value, allowing for intuitive interaction within defined limits.
{% embed url="" %}
## When to use
* Use when you need to let users adjust a value smoothly, such as brightness or volume settings.
* Best used when a range of values needs to be selected or modified within set limits.
* Use when you want to display instant feedback to the user as they adjust the value along the slider.
* Use when you need to allow the user to set a minimum and maximum range, such as setting price filters.
## When not to use
* Avoid sliders when the user needs to input a precise number, where a text input field is better.
* Don’t use sliders for selecting distinct or predefined options, such as choosing a list of items.
* Don’t use sliders when there is an overwhelming range of values that may cause the user difficulty in making fine adjustments.
* Avoid using sliders when screen space is limited and fine adjustments may be difficult to control.
* Do not use a slider for static information display, such as showing a progress bar or indicator.
## Types
## Anatomy
1. **Knob:** Draggable element that users move to set the value.
2. **Selected Range:** Portion of the track that visually shows the selected value.
3. **Track:** Visual bar that defines the full range of values.
## Styles
## Slider Value
## Size
| Size | Knob (px) | Track Height (px) |
| --------- | --------- | ----------------- |
| Small-16 | 16 | 16 |
| Medium-18 | 16 | 18 |
| Large-24 | 20 | 24 |
## Accessibility
* **Keyboard Accessibility:** Sliders should be operable via keyboard inputs, with users able to increment or decrement values using arrow keys or step controls.
* **Visible Focus States:** Ensure that sliders have a clear focus state to aid in keyboard navigation for users relying on assistive technologies.
* **Value Labels and Feedback:** Always provide textual or numerical feedback near the slider to clearly communicate the value as it changes.
* **Adjustable Step Intervals:** Provide step-based control for users who may need to make more precise adjustments, making sure each step is clearly defined.
* **Clear Visual Indicators:** Ensure both the handle and track of the slider are easily distinguishable for users with visual impairments.
## Example
* **Volume Control:** A slider used to adjust audio output levels on a media player.
* **Brightness Adjustment:** Used for modifying screen brightness or lighting intensity in settings menus.
* **Range Selector for Price Filter:** A dual-handle slider used to set a minimum and maximum price range on e-commerce websites.
* **Zoom Controls:** For applications where users need to zoom in or out, like maps or photo editors.
* **Time Range in Video Playback:** Allows users to select a start and end time for trimming a video or audio clip.
