# Vue Range Slider Component > Enhance your forms with our customizable Vue Range Slider component for advanced range selection. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=vue&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Overview The **Vue Range Slider** component allows users to select a value or range of values within a predefined range. It renders the markup of the [range](https://coreui.io/vue/docs/forms/range/): a `
` with one native `` per handle, so it looks like a range and reads its tokens, and adds what the range does not have: several handles on one track, `distance` between them, a press on the track that moves the nearest handle, clickable ticks and a vertical orientation. `class`, `style`, `theme`, `dir`, `hidden` and `role` land on the `.form-range`, which is a group named by a string in `aria-label` or by `aria-labelledby`; other input attributes, such as `aria-describedby`, reach every handle, and `id` and `autofocus` the first one. ```html ``` ### vModel ```html ``` ## Features - **Multiple Handles:** Select single or multiple values within the range. - **Ticks:** Draw ticks with labels at specific points on the slider. - **Tooltips:** Show dynamic tooltips displaying current values. - **Vertical Orientation:** Rotate the slider for vertical layouts. - **Clickable Ticks:** Enable users to click on ticks to set slider values. - **Disabled State:** Disable the slider to prevent user interaction. ## Basic Vue Range Slider Create a simple range slider with default settings. ```html ``` ## With form field Wrap the control in [``](https://coreui.io/vue/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. Point `aria-labelledby` at the label and `aria-describedby` at the description: the slider is a group named by the label, "Budget" here, its handles carry their own names, "Minimum" and "Maximum", and the text below describes every handle (see [Accessibility](#accessibility)). ```html ``` ## Multiple handles Enable multiple handles to allow the selection of a range or/and multiple values. The handles share one track, the band runs from the lowest handle to the highest, and each handle is a native range input, so dragging, the keyboard, touch, form submission and form reset work as they do for one. The handles stay in order, a press on the track moves the nearest one and it follows the pointer until it is released, and when two of them meet the one that can still move stays on top. ```html ``` ## Vertical Range Slider Rotate the slider to a vertical orientation. ```html ``` ## Disabled Disable the slider to prevent user interaction. ```html ``` ## Min and max Vue Range Slider component has implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. ```html ``` ## Steps Range Slider inputs automatically "snap" to whole numbers. To modify this behavior, set a `step` value. In the example below, we increase the number of steps by specifying `step="0.25"`. ```html ``` ## Distance Sets the minimum distance between multiple slider handles by setting `distance` and ensures that the handles do not overlap or get too close. ```html ``` ## Ticks Add ticks to specific points on the slider for better context. If you provide an array of strings, as in the example below, then ticks will be spaced at equal distances from the beginning to the end of the slider. ```html ``` ### Ticks customization Ticks can be configured as an array of strings, numbers or objects. A number is a bare tick at that value, with no text; with objects you can specify additional properties like `value`, `label`, `className`, and `style`. ```html ``` ### Tick marks Every tick is taller when it has text, so bare numbers and labelled points mix in one `ticks` array. All of them are laid out on one grid, so unevenly spaced values stay aligned. ```html ``` ### Clickable ticks By default, users can click on ticks to set the slider to specific values. You can disable this feature by setting `clickableTicks` to `false`. ```html ``` ## Tooltips The value tooltip is the [Tooltip](https://coreui.io/vue/docs/components/tooltip/) component's markup: the component renders `
` with the tooltip's arrow and body, so it takes the tooltip's look and its `--cui-tooltip-*` tokens. It does not inherit the slider's `theme`; give it its own through `tooltipClassName`. By default, tooltips show the current value of a handle while the pointer is over it, while it is held, and while it has a visible focus. Set `tooltips` to `"always"` to keep them visible at all times, or to `false` to turn them off. ```html ``` ### Tooltips formatting Customize the content of tooltips using the `tooltipsFormat` option. This can be a function that formats the tooltip text based on the current value. ```html ``` ## Track The `track` property allows you to customize how the slider's track is displayed. By default, the `track` property is set to `'fill'` enabling dynamic filling of the track based on the slider's current value(s). This means the filled portion of the track will adjust automatically as the slider handle(s) move, offering a responsive visual representation of the selected range. ### Disable filling If you set `track` to `false`, the slider's track will not display any fill. Only the default track background will be visible, which can be useful for minimalist designs or when you use more then two handles. ```html ``` ## Theme variants Color the filled track and the handles with the `theme` property. ```html ``` The `theme` colours the track and the handles; the tooltip keeps its default look. To theme the tooltip, pass a class through `tooltip-class-name` — it lands on the tooltip only. `theme-secondary` gives a grey tooltip on the default slider; `theme-danger` makes the tooltip match a danger slider. ```html ``` ## Validation _Added in 6.0.0._ A range never fails the browser's own validation: a handle always holds a value between `min` and `max` on a step, and `required` does not apply to it. A state comes from the page, when the value breaks a rule the browser does not know, such as a budget below the minimum of a plan. - Give it with `validation-state`. The state shows on the slider and on its handles: `'invalid'` colours the thumbs, sets `aria-invalid` on every handle and adds the invalid feedback that follows the slider to their `aria-describedby`. - `'invalid'` blocks the submit through the first handle, with the text of the feedback as the message the browser shows, or `Invalid value.` without one, and the browser moves the focus to that handle. `'valid'` and a custom state do not block, and neither does a disabled slider. - When the user moves a handle, or the form is reset, the slider emits `update:validationState` with `undefined` before it reports the change; bind it with `v-model:validation-state` to drop the state. A change of the value from your code keeps it. - A validity you set on a handle with `setCustomValidity()` shows on the slider once a validation reports it, and a given `'valid'` shows over it. ```html ``` ## Usage with v-model _Added in 6.0.0._ Bind `modelValue` with `v-model`, or pass it with an `@update:model-value` listener, and the slider is controlled: it renders exactly what you pass, and dragging a handle only emits the change, always as an array. Feed it back and the handle follows — `v-model` is that loop in one attribute; ignore it and the handle stays on your value. Without a listener, `modelValue` is only the starting value, as below. A native reset of the form puts back the values the slider started with and emits `change` and `update:modelValue` when that moves a handle; a bound slider only asks for its first values there. ```html ``` ### Initial value Give the slider a starting point and let it manage itself; a form reset brings it back to that value. ```vue ``` Both take a single number as well as an array of values, and `change` fires either way — so you can watch the state without taking it over. ## Accessibility Each handle is a native ``, so it is a slider with its value, minimum and maximum without any ARIA of its own, and the browser handles the keyboard: the arrow keys, Page Up, Page Down, Home and End. In a vertical slider the handles carry `aria-orientation="vertical"`, and → increases the value in every browser, as ↑ does. The slider is a `group`. Give it the name of the field, with `aria-labelledby` pointing at a visible label or with a string in `aria-label`: a screen reader announces the group, "Budget", when the focus enters it, and then each handle by its own name, so it can tell the handles of one slider from another's. A single handle repeats the name of the group, since it has none of its own. `aria-describedby` describes every handle. Name the handles themselves with an array in `aria-label`, one name per handle, or a function `(index, total) => string`. Without it, two handles are named "Minimum value" and "Maximum value" and more handles "Value 1", "Value 2" and so on. Both take the one `aria-label` prop, so a group named with a string keeps the generated handle names; to give the group a name and the handles names of their own, point `aria-labelledby` at a visible label and pass the array. A single handle has no generated name: it takes the name of the group, followed by its own name when `aria-labelledby` names the group, or a `