Slider

滑块。List UI 提供与WeLink规范一致的视图。 组件提供了滑动前、滑动中、数值提示的样式。

参数说明

参数 类型 默认值 说明
max number 100 最大值
min number 0 最小值
step number 1 滑块中两个数之间的偏移量
showValue bool true 是否显示值
disabled bool false 是否禁止滑动
value number - 滑块值
defaultValue number 0 滑块初始值
onChange func - 滑块值更改的回调时间
snapToValue bool - 滑块值更改、传递值和事件实例时是否回调

效果示例

HTML
import React from 'react';
import {
  Slider, CellsTitle, Button, ButtonArea
} from '@wecode/react-weui';
const _style = { marginLeft: '10px' };
class SliderDemo extends React.Component {

  state = {
    controlValue: 50
  };

  render() {
    const { controlValue } = this.state;
    return (
      <section>
        <CellsTitle>Basic Example</CellsTitle>
        <Slider min={1} max={5} step={1} onChange={value => console.log(value)} />
        <CellsTitle>Disabled Example</CellsTitle>
        <Slider disabled onChange={value => console.log(value)} />
        <CellsTitle>Controlled Example</CellsTitle>
        <Slider
          max={100}
          step={2}
          value={controlValue}
          onChange={value => this.setState({ controlValue: value })}
        />
        <ButtonArea>
          <Button
            size="small"
            onClick={() => {
              if (controlValue >= 10) {
                this.setState({ controlValue: controlValue - 10 });
              }
            }}
          >
            - 10
          </Button>
          <Button
            style={_style}
            size="small"
            onClick={() => {
              if (controlValue <= 90) {
                this.setState({ controlValue: controlValue + 10 });
              }
            }}
          >
            + 10
          </Button>
        </ButtonArea>
        <br />
        <CellsTitle>No snap & No show value</CellsTitle>
        <Slider snapToValue={false} showValue={false} />
      </section>
    );
  }
}
export default SliderDemo;

result. ""

    Not Found. ""