---
name: "slider"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "slider - Slider picker"
---

## slider

> [VERSION] Base Library >= 2.10.0

### Description

Slider selector with configurable range and step size.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | No | - | Field name in the form |
| `min` | `number` | No | `0` | Minimum value |
| `max` | `number` | No | `100` | Maximum value |
| `step` | `number` | No | `1` | Step; must be > 0, and (max - min) must be divisible by it |
| `value` | `number` | No | `0` | Current value |
| `show-value` | `boolean` | No | `false` | Whether to display the current value |
| `active-color` | `string` | No | `""` | Selected color |
| `background-color` | `string` | No | `""` | Background track color |
| `block-size` | `number` | No | `28` | Thumb size, range 12~28 |
| `block-color` | `string` | No | `""` | Thumb color |
| `disabled` | `boolean` | No | `false` | Whether disabled |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: SliderChangeEvent) => void` | Triggered after dragging ends |
| `changing` | `(event: SliderChangingEvent) => void` | Continuously triggered during dragging |

**SliderChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `SliderEventDetail` | Event data |

**SliderChangingEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"changing"` | Event type |
| `detail` | `SliderEventDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<view>
  <slider value="{{val}}" show-value bind:change="onChange" />
  <text>Current value: {{val}}</text>
</view>
```

*index.tyss*

```css
slider {
  width: 100%;
  margin: 20rpx 0;
}
```

*index.js*

```javascript
Page({
  data: { val: 50 },
  onChange(e) {
    this.setData({ val: e.detail.value });
  },
});
```

#### Custom range, step, and color

*index.tyml*

```xml
<view>
  <slider min="{{0}}" max="{{1000}}" step="{{100}}" show-value bind:change="onStepChange" />
  <slider value="{{50}}" active-color="orange" block-color="pink" background-color="#e0e0e0" bind:change="onColorChange" />
</view>
```

*index.tyss*

```css
slider {
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({
  onStepChange(e) {
    console.log('Step value:', e.detail.value);
  },
  onColorChange(e) {
    console.log('Color value:', e.detail.value);
  },
});
```

#### Disabled state and drag events

*index.tyml*

```xml
<view>
  <slider disabled="{{true}}" value="{{40}}" />
  <slider block-size="{{18}}" show-value bind:changing="onChanging" bind:change="onChange" />
</view>
```

*index.tyss*

```css
slider {
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({
  onChanging(e) {
    console.log('Dragging:', e.detail.value);
  },
  onChange(e) {
    console.log('Drag ended:', e.detail.value);
  },
});
```