Slider
Sliders allow users to select a single value from a range.
Overview
Import
Import the component from @faststore/ui
import { Slider } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/atoms/Slider/styles.scss'Usage
$0$500
$100$250
<Slider
max={{ absolute: 500, selected: 250 }}
min={{ absolute: 0, selected: 100 }}
absoluteValuesLabel={{
min: useFormattedPrice(0),
max: useFormattedPrice(500),
}}
maxValueLabelComponent={(maxValue) => {
return <Price formatter={useFormattedPrice} value={maxValue} />
}}
minValueLabelComponent={(minValue) => {
return <Price formatter={useFormattedPrice} value={minValue} />
}}
/>Props
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
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-slider
data-fs-slider-absolute-values
data-fs-slider-range
data-fs-slider-thumb="left" | "right"
data-fs-slider-value-label="min" | "max"
Related components
- $0$500$100$250
PriceRange
Price Ranges are sliders that allows users to select a maximum and minimum price.
See more