Slider

Demo

Install

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

Usage

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.

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

<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