zent-slider v1.0.0

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

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