---
name: "Slider"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Slider - Slider selector"
---

## Slider

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

### Description

Slider for selecting a value within a range by dragging the handle.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `min` | `number` | No | `0` | Minimum value |
| `max` | `number` | No | `100` | Maximum value |
| `step` | `number` | No | `1` | Step; must be greater than 0 and evenly divide (max - min) |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `value` | `number` | No | `0` | Current value |
| `activeColor` | `string` | No | `"#007AFF"` | Selected color |
| `backgroundColor` | `string` | No | `"rgba(0, 0, 0, 0.2)"` | Background track color |
| `blockSize` | `number` | No | `28` | Thumb size, range: 12–28 |
| `blockColor` | `string` | No | `"#FFF"` | Thumb color |
| `showValue` | `boolean` | No | `false` | Whether to show the current value |
| `name` | `string` | No | - | Form field name, used as the key on form submit |
| `onChange` | `(event: SliderChangeEvent) => void` | No | - | Triggered after a drag completes |
| `onChanging` | `(event: SliderChangingEvent) => void` | No | - | Triggers during dragging |

### Referenced Types

##### `interface` SliderChangeEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `SliderEventDetail` | Event data |
| `value` | `number` | Current value |

##### `interface` SliderChangingEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"changing"` | Event type |
| `detail` | `SliderEventDetail` | Event data |
| `value` | `number` | Current value |

##### `interface` SliderEventDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `number` | Current value |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```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 changed:', e.detail.value);
        }}
      />
    </View>
  );
}
```

#### Custom styles

```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>Display value:</Text>
        <Slider
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>Custom range and step:</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>Custom colors:</Text>
        <Slider
          value={value}
          activeColor="orange"
          blockColor="pink"
          backgroundColor="#e0e0e0"
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}
```

#### Disabled and drag events

```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>Disabled state:</Text>
        <Slider disabled value={40} style={{ marginTop: '10px' }} />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>Custom thumb size + dragging event:</Text>
        <Slider
          blockSize={18}
          showValue
          onChanging={(e) => console.log('Dragging:', e.detail.value)}
          onChange={(e) => console.log('Drag ended:', e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}
```