Slider
Sliders allow users to select a single value from a range.
The
Slider component provides an interactive way for users to select a single value from a defined range. Common use cases include adjusting prices, setting volume, or selecting values where precision within boundaries matters.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
Accessible Slider with aria-value-text
Example
Code
050
Slider with custom value labels
Example
Code
0100
10 kg90 kg
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