Slider
Sliders allow users to select minimum and maximum values from a range.
2 min read
The
Slider component provides two controls for selecting minimum and maximum values within a defined range. Common use cases include filtering products by price, weight, or another bounded interval.Example
Code
0500
Usage
Import the component
_10import { Slider } from "@faststore/ui";
Import Styles into your FastStore project
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Slider/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Slider with custom step
Example
Code
050
Slider with custom value labels
Example
Code
0100
10 kg90 kg
Each thumb is rendered as a native
input with type="range" and exposes its current numeric value as its accessible label. The custom value label components add visible content; they do not set aria-valuetext.Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-slider-height | var(--fs-spacing-2) |
--fs-slider-border-radius | var(--fs-border-radius-pill) |
--fs-slider-margin-bottom | var(--fs-spacing-3) |
--fs-slider-slider-bkg-color | var(--fs-color-neutral-bkg) |
--fs-slider-slider-selection-bkg-color | var(--fs-color-primary-bkg-light-active) |
--fs-slider-transition-function | var(--fs-transition-function) |
--fs-slider-transition-property | var(--fs-transition-property) |
--fs-slider-transition-timing | var(--fs-transition-timing) |
Design tokens: Thumb
Thumb tokens control the appearance of the slider's draggable handle, including its size, color, border, and hover states.
| Local token | Default value/Global token linked |
|---|---|
--fs-slider-thumb-size | var(--fs-spacing-4) |
--fs-slider-thumb-bkg-color | var(--fs-color-primary-bkg) |
--fs-slider-thumb-bkg-color-hover | var(--fs-color-primary-bkg-hover) |
--fs-slider-thumb-border-width | var(--fs-border-width) |
--fs-slider-thumb-border-radius | var(--fs-border-radius-circle) |
--fs-slider-thumb-border-color | var(--fs-slider-thumb-bkg-color) |
--fs-slider-thumb-border-color-hover | var(--fs-slider-thumb-bkg-color-hover) |
Design tokens: Absolute values
Absolute value tokens define the color for the labels showing the minimum and maximum values on the slider.
| Local token | Default value/Global token linked |
|---|---|
--fs-slider-absolute-values-text-color | var(--fs-color-disabled-text) |
Design tokens: Value label
Value label tokens set the position and background color for the labels displaying the current slider value.
| Local token | Default value/Global token linked |
|---|---|
--fs-slider-value-label-bottom | var(--fs-spacing-3) |
--fs-slider-value-label-bkg-color | var(--fs-color-body-bkg) |
Data attributes
You can target and override Slider styles using the following data attributes:
data-fs-sliderdata-fs-slider-absolute-valuesdata-fs-slider-rangedata-fs-slider-thumb="left" | "right"data-fs-slider-value-label="min" | "max"Props
Range
| Name | Type | Description | Default |
|---|---|---|---|
| absolute | number | The absolute value of the slider. | |
| selected | number | The selected value of the slider. |
RangeLabel
| Name | Type | Description | Default |
|---|---|---|---|
| min | string | ReactNode | Label for minimum range value. | |
| max | string | ReactNode | Label for maximum range value. |
Related components
- $0$500$100$250