@accessible/slider 中文文档教程

Question

---

<Slider>

npm i @accessible/slider

---

React 的可访问且多功能的滑块组件。 这些组件是可触摸的， 键盘可导航。

该库包含开箱即用的单拇指滑块组件，尽管您可以可行地设计一个 来自此处的双拇指滑块。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 import {Slider, Track, Thumb}

从 '@accessible/slider' const Component = () => ( <滑块方向="垂直">

)

## API

### `<Slider>`

Creates the context for your slider and configures it. This also creates the underlying
`<input type='range'>` component. Any props not listed below are provided to the `<input>`.

#### 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  | <code>"horizontal" &#0124; "vertical"</code> | `"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.                                                                                                                                                    |

### `<Track>`

This component attaches event handlers to its child that make it act like a native `<input type="range">` 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. |

### `<Thumb>`

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`

打字稿jsx 接口 SliderContextValue { 增加：（按？：数字）=> 空白 decr: (by?: number) => 空白 设置：（值：数字）=> 空白 值：数字 最小值：数字 最大：数字 步骤：数字 重点：布尔值 禁用：布尔值 方向：'水平' | '垂直的' inputRef: React.MutableRefObject} ```

useValue()

一个返回滑块当前值

useProgress()

的钩子 value 一个返回 (value - min) / (max - min) 值

useOrientation()

的钩子返回滑块的当前方向

useFocused()

如果滑块聚焦

useDisabled()

则返回true的钩子如果滑块禁用<则返回true的钩子/code>

useControls()

提供滑块的 incr、decr 和 set 函数的挂钩

LICENSE

MIT