Slider 滑动输入条

基本用法

import { Cell, Slider } from 'zarm';
class Demo extends React.Component {
  state = {
    value: 0,
  };
  render() {
    return (
      <>
        <Cell title="普通">
          <Slider
            value={this.state.value}
            onChange={(value) => {
              this.setState({ value })
              console.log(value);
            }}
          />
        </Cell>
        <Cell title="设置默认值">
          <Slider defaultValue={20} />
        </Cell>
        <Cell title="设置上下限">
          <Slider min={-100} max={100} defaultValue={0} />
        </Cell>
        <Cell title="禁用状态">
          <Slider disabled defaultValue={20} />
        </Cell>
      </>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

刻度与标记

import { Cell, Slider } from 'zarm';
const MARKS = {
  0: '0°C',
  26: '26°C',
  65: '65°C',
  100: '100°C',
}
ReactDOM.render(
  <>
    <Cell title="显示刻度">
      <Slider marks={MARKS} />
    </Cell>
    <Cell title="显示标记" style={{ paddingBottom: 15 }}>
      <Slider showMark marks={MARKS} />
    </Cell>
    <Cell title="步长为10" style={{ paddingBottom: 15 }}>
      <Slider showMark step={10} marks={MARKS} />
    </Cell>
    <Cell title="步长为null" style={{ paddingBottom: 15 }}>
      <Slider showMark step={null} marks={MARKS} />
    </Cell>
  </>
, mountNode);

方向

import { Cell, Slider } from 'zarm';
const MARKS = {
  0: '0°C',
  26: '26°C',
  65: '65°C',
  100: '100°C',
}
ReactDOM.render(
  <Cell title="垂直方向" style={{ padding: '15px 0' }}>
    <div style={{ height: 200 }}>
      <Slider vertical showMark marks={MARKS} />
    </div>
  </Cell>
, mountNode);

API