---
name: "Slider"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Slider - 滑动选择器"
---

## Slider

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

滑动选择器，通过拖动滑块在数值区间内选取结果。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `min` | `number` | 否 | `0` | 最小值 |
| `max` | `number` | 否 | `100` | 最大值 |
| `step` | `number` | 否 | `1` | 步长，取值必须大于 0，并且可被 (max - min) 整除 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `value` | `number` | 否 | `0` | 当前取值 |
| `activeColor` | `string` | 否 | `"#007AFF"` | 已选择的颜色 |
| `backgroundColor` | `string` | 否 | `"rgba(0, 0, 0, 0.2)"` | 背景条的颜色 |
| `blockSize` | `number` | 否 | `28` | 滑块的大小，取值范围为 12～28 |
| `blockColor` | `string` | 否 | `"#FFF"` | 滑块的颜色 |
| `showValue` | `boolean` | 否 | `false` | 是否显示当前 value |
| `name` | `string` | 否 | - | 表单控件名称，提交表单时作为键名 |
| `onChange` | `(event: SliderChangeEvent) => void` | 否 | - | 完成一次拖动后触发 |
| `onChanging` | `(event: SliderChangingEvent) => void` | 否 | - | 拖动过程中触发 |

### 引用对象

##### `interface` SliderChangeEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `"change"` | 事件类型 |
| `detail` | `SliderEventDetail` | 事件数据 |
| `value` | `number` | 当前取值 |

##### `interface` SliderChangingEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `"changing"` | 事件类型 |
| `detail` | `SliderEventDetail` | 事件数据 |
| `value` | `number` | 当前取值 |

##### `interface` SliderEventDetail

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `value` | `number` | 当前取值 |

##### `interface` BaseEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `string` | 事件类型 |
| `timeStamp` | `number` | 页面打开到触发事件所经过的毫秒数 |
| `target` | `Target` | 触发事件的源组件 |
| `currentTarget` | `Target` | 当前组件的一些属性值集合 |
| `mark` | `any` | 事件标记数据 |

##### `interface` Target

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `id` | `string` | 事件源组件的id |
| `dataset` | `Record<string, unknown>` | 事件源组件上的 `dataset` 自定义属性组成的集合 |


### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { Slider, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Slider
        onChange={(e) => {
          console.log('Slider 改变:', e.detail.value);
        }}
      />
    </View>
  );
}
```

#### 自定义样式

```tsx
import React, { useState } from 'react';
import { Slider, View, Text } from '@ray-js/ray';

export default function () {
  const [value, setValue] = useState(100);

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '20px' }}>
        <Text>显示数值:</Text>
        <Slider
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义范围和步长:</Text>
        <Slider
          min={50}
          max={200}
          step={5}
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义颜色:</Text>
        <Slider
          value={value}
          activeColor="orange"
          blockColor="pink"
          backgroundColor="#e0e0e0"
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}
```

#### 禁用与拖动事件

```tsx
import React from 'react';
import { Slider, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '20px' }}>
        <Text>禁用状态:</Text>
        <Slider disabled value={40} style={{ marginTop: '10px' }} />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义滑块大小 + 拖动中事件:</Text>
        <Slider
          blockSize={18}
          showValue
          onChanging={(e) => console.log('拖动中:', e.detail.value)}
          onChange={(e) => console.log('拖动结束:', e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}
```