Slider 滑动输入条

通过拖动、点击 Slider 组件选择数值

使用指南

• 可设置单滑块或者双滑块
• 可与 Input 输入框配合使用

代码演示

:::demo 基础用法

import { Slider } from 'zent';

class Test extends React.Component {
  state = {
    value: 0
  }

  onChange = value => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (<Slider value={value} onChange={this.onChange} />);
  }
}

ReactDOM.render(
    <Test />
    , mountNode
);

:::

:::demo 双滑块选择范围

import { Slider } from 'zent';

class Test extends React.Component {
  state = {
    value: [30, 100]
  }

  onChange = value => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (<Slider range value={value} onChange={this.onChange} />);
  }
}

ReactDOM.render(
    <Test />
    , mountNode
);

:::

:::demo 设置最大值，最小值，间隔

import { Slider } from 'zent';

class Test extends React.Component {
  state = {
    value: 1.3
  }

  onChange = value => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (<Slider max={2} min={1} step={0.1} value={value} onChange={this.onChange} />);
  }
}

ReactDOM.render(
    <Test />
    , mountNode
);

:::

:::demo 标签值

import { Slider } from 'zent';

const marks = {
  0: '0°C',
  100: '100°C'
};

class Test extends React.Component {
  state = {
    value: [30, 100]
  }

  onChange = value => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (<Slider range marks={marks} value={value} onChange={this.onChange} />);
  }
}

ReactDOM.render(
    <Test />
    , mountNode
);

:::

:::demo 只能选择标签值，此时无输入框

import { Slider } from 'zent';

const marks = {
  0: '0°C',
  25: '25°C',
  50: '50°C',
  75: '75°C',
  100: '100°C'
};

class Test extends React.Component {
  state = {
    value: [0, 50]
  }

  onChange = value => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (<Slider range dots marks={marks} value={value} onChange={this.onChange} />);
  }
}

ReactDOM.render(
    <Test />
    , mountNode
);

:::

:::demo disabled

import { Slider } from 'zent';

ReactDOM.render(
    <Slider value={[30, 100]} range disabled />
    , mountNode
);

:::

API

| 参数 | 说明 | 类型 | 默认值 | 备选值 | 是否必填 | | ------------ | --------------- | ------------- | -------- | ----------------------- | ---- | | value | 输入值 | [number,array] | 0 | [0,0] | 是 | | onChange | change 事件 | func(e:Event) | | | 否 | | range | 是否选择范围 | bool | false | | 否 | | max | 最大范围 | number | 100 | 50 | 否 | | min | 最小范围 | number | 0 | -100 | 否 | | step | 间隔 | number | 1 | | 否 | | withInput | 是否带输入框 | bool | true | | 否 | | dots | 是否只能在标签值中选择 | bool | true | | 否 | | marks | 标签值 | object | | | 否 | | disabled | 是否禁用 | bool | false | | 否 | | className | 自定义额外类名 | string | '' | | 否 | | prefix | 自定义类前缀 | string | 'zent' | | 否 |

range 属性设置了必须给一个 value 值，且一定为一个长度为2的数组，数组项必须为数字。dots 属性配合 marks 属性使用。