@wix/design-system
Version:
@wix/design-system
104 lines (101 loc) • 3.58 kB
Markdown
### allowCross
- type: boolean
- description: Allows sliders handles to cross.
- default: true
### dataHook
- type: string
- description: Applies a data-hook HTML attribute that can be used in the tests.
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
- internal
### displayMarks
- type: boolean
- description: Controls the visibility of the marks.
- default: true
### displayTooltip
- type: boolean
- description: Controls visibility of slide handle tooltip
- default: true
### id
- type: string
- description: Assigns an unique identifier for the root element.
### max
- type: number
- description: Sets the absolute maximum value of sliders range.
- default: 20
### min
- type: number
- description: Sets the absolute minimum value of the sliders range.
- default: 1
### onAfterChange
- type: (value: number | number[]) => void
- description: Defines a callback function which will be called when ontouchend or onmouseup is triggered.
### onBeforeChange
- type: (value: number | number[]) => void
- description: Defines a callback function which will be called when ontouchstart or onmousedown is triggered.
### onChange
- type: (value: number | number[]) => void
- description: Defines a callback function which is called upon every value change.
### onBlur
- type: (value: number | number[], event?: FocusEvent<Element, Element> | undefined) => void
- description: Sets the onBlur callback for the slider's handle.
```javascript
onBlur((handleValue) => ({}))
```
### onFocus
- type: (value: number | number[], event?: FocusEvent<Element, Element> | undefined) => void
- description: Sets the onFocus callback for the slider's handle.
```javascript
onFocus((handleValue) => ({}))
```
### rtl
- type: boolean
- description: Adjust component for RTL.
- default: false
### step
- type: number
- description: Specifies the interval between range values.
- default: 1
### pushable
- type: number | false | true
- description: Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles.
### value
- type: number | number[]
- description: Specifies the selected value.
- default: 3
### disabled
- type: boolean
- description: Specifies whether interactions are disabled.
- default: false
### marks
- type: { [key: number]: string | number; }
- description: Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either
```{ number : number}``` / ```{ number : string }```
### startPoint
- type: number
- description: Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point.
- default: undefined
### direction
- type: "horizontal" | "vertical"
- description: Sets slider direction in either horizontal way or vertical
- default: 'horizontal'
### ariaLabelForHandle
- type: string | string[]
- description: Set the aria-label attributes for slider handles.
### gradientColor
- type: string
- description: Converts slider to a slider with a gradient background. RGB, HEX formats or color names are accepted.
```javascript
gradientColor="rgb(105, 110, 28)"
gradientColor="#FFAC4B"
gradientColor="pink"
```
If color cannot be parsed, fallback color will be applied
### marksLabelAlignment
- type: "center" | "inside"
- description: Sets the alignment of the marks labels.
- default: 'center'
### formatValue
- type: (value: number) => string
- description: Formats the raw value for display in tooltip.