Slider
Sliders allow users to select a single value from a range.
Overview
Example
Code
Default Version
0500
Show Labels on Hover
0500
100250
Import
Import the component from @faststore/ui
_10import { Slider } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/atoms/Slider/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
$0$500
$100$250
_14<Slider_14 max={{ absolute: 500, selected: 250 }}_14 min={{ absolute: 0, selected: 100 }}_14 absoluteValuesLabel={{_14 min: useFormattedPrice(0),_14 max: useFormattedPrice(500),_14 }}_14 maxValueLabelComponent={(maxValue) => {_14 return <Price formatter={useFormattedPrice} value={maxValue} />_14 }}_14 minValueLabelComponent={(minValue) => {_14 return <Price formatter={useFormattedPrice} value={minValue} />_14 }}_14/>
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. |
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) |
Nested Elements
Thumb
| 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) |
Absolute Values
| Local token | Default value/Global token linked |
|---|---|
--fs-slider-absolute-values-text-color | var(--fs-color-disabled-text) |
Value Label
| 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) |
Customization
For further customization, you can use 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"Related components
- $0$500$100$250