# Flux 2.0 — Slider A duration, count or amount chosen by dragging along a bounded scale, as one value or a range. Reference: https://flux.kaptio.com/components/slider/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when A slider sets a number where the position within its bounds matters more than the exact figure: the length of a stay, a tour duration filter, a cancellation window. It is a native range input, so arrow keys, Home and End, form submission and the slider role come from the platform. Two inputs over one track make a range, such as tours of 7 to 14 days, and the handles never cross. The value is always shown as text beside the label, with its unit, so it is never read from the handle position alone. ## Do not use it when Not when the exact number matters or the range is wide, such as a price or a passenger count above twenty; use an Input with type="number", which is faster to type and to correct. Not for a few named options; use a Segmented control. Not for dates; use the Date picker. ## Markup ### Value
### Duration range
Tour length
### With an explanation
### Disabled
## API - flux-slider (class): The wrapper. Holds the label line, the control and the scale. - data-flux-slider (attribute): Binds the fill, the visible value and aria-valuetext to the inputs. Requires flux-components.js. - data-flux-slider-unit | -units (attribute): The unit for one and for every other number: "night" and "nights". Used in the value text and in aria-valuetext. - flux-slider__value (class): The value text at the end of the label line, with aria-hidden="true". Write the initial value into it. - flux-slider__control (class): The track. Contains one input for a value or two for a range. - flux-slider__input (class): On each input type="range", with min, max, step, value and an initial aria-valuetext. - flux-slider__scale (class): The minimum and maximum under the track, aria-hidden because the input already exposes its bounds. - role="group" (attribute): On the wrapper of a range, with aria-labelledby pointing at its label. Each input then takes aria-label="Minimum …" or "Maximum …". ## Accessibility - A native input type="range" carries the slider role, its bounds and keyboard support. Do not rebuild it from a div. - Set aria-valuetext with the unit, "7 nights" rather than "7"; flux-components.js keeps it current as the value changes. - The visible value is aria-hidden so it is not announced twice while dragging; the input announces aria-valuetext. - A range is a group named by its visible label, and each handle says whether it is the minimum or the maximum. - The value is shown as text, so it is never conveyed by handle position or fill alone. ## Keyboard - Arrow Right / Arrow Up: Increases the focused handle by one step. - Arrow Left / Arrow Down: Decreases the focused handle by one step. - Page Up / Page Down: Moves by a larger step, as the browser defines it. - Home / End: Moves the focused handle to the minimum or maximum, or to the other handle of a range. - Tab: Moves from the minimum handle to the maximum handle, then on. ## Tokens - --flux-slider-thumb-size | -thumb-border-width | -thumb-bg | -thumb-bg-hover | -thumb-border - --flux-slider-track-height | -track | -fill - --flux-slider-value | -scale | -scale-gap ## Do - Name the quantity in the label and the unit in data-flux-slider-unit, so every reading says what it measures. - Choose a step that matches the decision: whole nights, whole days, five-minute intervals. - Write the initial value and aria-valuetext into the markup, so the page reads correctly before the script runs. ## Do not - Do not use a slider for a value people need exactly, such as a price; use a number Input. - Do not hide the value text and leave the handle position to say it. - Do not explain the value in text below the track. Use the info bubble. - Do not put two independent sliders on one track. A shared track is only for a minimum and maximum of the same quantity.