# Bootstrap 6 Range Slider > Enhance your forms with our customizable Bootstrap 6 Range Slider component for advanced range selection. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=bootstrap&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Overview The **Bootstrap 6 Range Slider** component allows users to select a value or range of values within a predefined range. It builds the markup of the [range](https://coreui.io/bootstrap/docs/forms/range/) from its options: a `
` inside the element, with one native `.form-range-input` per handle, so it looks like a range and takes its tokens. The slider adds what the range does not have: several handles kept in order and `distance` apart on one track, a press on the track that moves the nearest handle, clickable ticks and a vertical orientation. Its options are one place to configure the handles, ticks, tooltips and orientation. ```html
``` ## Features - **Multiple Handles:** Select single or multiple values within the range. - **Ticks:** Draw tick marks, with or without a label, at specific points on the slider, or read them from a ``. - **Tooltips:** Show the current value of each handle while it is hovered, dragged or focused, or all the time. - **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 Range Slider Create a simple range slider with default settings. ```html
``` ## With form field Wrap the control in [`.form-field`](https://coreui.io/bootstrap/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. Point the slider element's `aria-labelledby` at the label and its `aria-describedby` at the description: the slider element is a group named by the label, "Budget" here, its handles carry their own names, "Minimum" and "Maximum", and the component moves the description onto every handle (see [Accessibility](#accessibility)). ```html
Budget
Monthly spend, in thousands.
``` ## 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 Range Slider 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 at specific points on the slider for better context. If you provide an array of strings, as in the example below, then labelled 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`, `class`, and `style`. Every entry draws a tick, taller when it has text, and all of them are laid out on one grid, so unevenly spaced values stay aligned. ```html
``` ```js const myRangeSliderCustomTicks = document.getElementById('myRangeSliderCustomTicks') const optionsRangeSliderCustomTicks = { ariaLabel: ['Minimum temperature', 'Maximum temperature'], min: -50, max: 100, ticks: [ { value: -50, label: '-50°C', class: 'fg-info' }, { value: 0, label: '0°C', style: { fontWeight: 'bold' } }, { value: 20, label: '20°C', class: ['fg-warning'] }, { value: 100, label: '100°C', class: 'fg-danger' } ], tooltipsFormat: value => `${value}°C`, value: [-10, 40] } new coreui.RangeSlider(myRangeSliderCustomTicks, optionsRangeSliderCustomTicks) ``` Numbers and labelled points mix in one array; passed through a data attribute, the array is JSON. ```html
``` ### Tick marks from a datalist Point the `list` option at the `id` of a `` and every `