> For the complete documentation index, see [llms.txt](https://bctc.gitbook.io/vant-react-official-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bctc.gitbook.io/vant-react-official-docs/slider.md).

# Slider

### [Demo](https://vant.bctc.io/?path=/story/slider--basic-usage)

#### Install

```
import React from 'react';
import { Slider } from 'vant-react';
```

## Usage

{% hint style="info" %}
Every slider should have its own state. And if we have more than one slider on the same page, each slider should have a unique id.
{% endhint %}

```
const [value, setValue] = useState(0)
  
<Slider id='a' value={value} setValue={setValue} />
```

#### Slide Range

```
<Slider range={{ min: '-50px', max: '50px' }} />
```

#### Slide Step

```
<Slider step={10} />
```

#### Disabled

```
<Slider disabled />
```

#### Show Value

```
<Slider   sliderStyle={{
          color: '#000',
          fontSize: '12px',
          backgroundColor: '#fff',
          borderRadius: '5px',
          borderColor: '#000'
        }}
        sliderSize={{ width: '30px', height: '20px' }}
        hasValue
      />
```

#### Custom Size  &#x20;

```
<Slider   size={{ width: '300px', height: '10px' }}
          sliderSize={{ width: '30px', height: '30px' }}
        />
```

#### Custom Style

```
<Slider   size={{ width: '400px', height: '10px' }}
          sliderStyle={{ backgroundColor: '#2F4F4F' }}
          inactiveColor='transparent'
          activeColor='#b90000'
        />
```

## API

#### Props

| Attribute       | Description                                                                                     | Type           | Default | Required   |
| --------------- | ----------------------------------------------------------------------------------------------- | -------------- | ------- | ---------- |
| `hasValue`      | Whether show value in slider button                                                             | ***boolean***  | `false` | *optional* |
| `disabled`      | Whether ban the slider                                                                          | ***boolean***  | `false` | *optional* |
| `activeColor`   | Color in the fill bar                                                                           | ***string***   | -       | *optional* |
| `inactiveColor` | Color in the wrapper bar                                                                        | ***string***   | -       | *optional* |
| `size`          | Slider size `{width:string,height:string}`                                                      | ***object***   | -       | *optional* |
| `sliderSize`    | Slider button size                                                                              | ***object***   | -       | *optional* |
| `sliderStyle`   | Custom  slider button style from color, fontSize, backgroundColor, borderRadius and borderColor | ***object***   | -       | *optional* |
| `range`         | Slider range `{min:string,max:string}`                                                          | ***object***   | -       | *optional* |
| `id`            | If we have more than one slider on the same page, each slider should have a unique id.          | ***string***   | -       | *optional* |
| `step`          | `Step length in each slide`                                                                     | ***number***   | -       | *optional* |
| `value`         | Value state                                                                                     | ***number***   | -       | *required* |
| `setValue`      | setState                                                                                        | ***function*** | -       | *required* |