<Slider>

) ``` ## API ### `` Creates the context for your slider and configures it. This also creates the underlying `` component. Any props not listed below are provided to the ``. #### Props | Prop | Type | Default | Required? | Description | | ------------ | -------------------------------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | min | `number` | `0` | Yes | The minimum value of the slider | | max | `number` | `100` | Yes | The maximum value of the slider | | step | `number` | `1` | Yes | The amount the slider increases or decreases each time it is ticked | | value | `number` | `undefined` | No | Makes this component controlled. This is always the value of the slider. `incr`, `decr`, `set` and keyboard steps have no effect. | | defaultValue | `number` | `50` | No | Sets the default value of the slider | | orientation | "horizontal" | "vertical" | `"horizontal"` | Yes | Sets the orientation of the slider. When `horizontal` the minimum value is on the left, max on the right. When `vertical`, the minimum value is on the bottom and the max is on the top. | | disabled | `boolean` | `false` | No | Disables the slider `incr`, `decr`, `set`, and keyboard controls. You can still update the slider's value using the `value` prop. | | onChange | `(value?: number) => any` | `undefined` | No | Called each time the `value` changes. | ### `` This component attaches event handlers to its child that make it act like a native `` track. It is your responsibility to style it. #### Props | Prop | Type | Default | Required? | Description | | -------- | -------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------- | | children | `React.ReactElement` | `undefined` | Yes | Provides events to its child component that control the state of the slider's value depending on the current drag/click position. | ### `` This component adds styles to its child that update the child's position within a track based upon the progress of the slider i.e. `(value - min) / (max - min)`. #### Props | Prop | Type | Default | Required? | Description | | -------- | -------------------- | ----------- | --------- | ------------------------------------------------------- | | children | `React.ReactElement` | `undefined` | Yes | The child component you want to add progress styles to. | ### `useSlider()` A hook that provides the slider's [`SliderContext`](#slidercontextvalue) ### `SliderContextValue` ```typescript jsx interface SliderContextValue { incr: (by?: number) => void decr: (by?: number) => void set: (value: number) => void value: number min: number max: number step: number focused: boolean disabled: boolean orientation: 'horizontal' | 'vertical' inputRef: React.MutableRefObject } ``` ### `useValue()` A hook that returns the slider's current `value` ### `useProgress()` A hook that returns the value of `(value - min) / (max - min)` ### `useOrientation()` A hook that returns the slider's current orientation ### `useFocused()` A hook that returns `true` if the slider is `focused` ### `useDisabled()` A hook that returns `true` if the slider is `disabled` ### `useControls()` A hook that provide's the slider's `incr`, `decr`, and `set` functions ## LICENSE MIT