Element-React Slider 滑塊

通過拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇

基礎(chǔ)用法

在拖動(dòng)滑塊時(shí)，顯示當(dāng)前值

通過設(shè)置綁定值自定義滑塊的初始值

constructor(props) {
  super(props);
  this.state = {
    value1: 0,
    value2: 50,
    value3: 36,
    value4: 48,
    value5: 42
  }
}
formatTooltip(val) {
  return val / 100;
}
render() {
  return (
    <div>
      <div className="block">
        <span className="demonstration">默認(rèn)</span>
        <Slider value={this.state.value1} />
      </div>
      <div className="block">
        <span className="demonstration">自定義初始值</span>
        <Slider value={this.state.value2} />
      </div>
      <div className="block">
        <span className="demonstration">隱藏 Tooltip</span>
        <Slider value={this.state.value3} showTooltip={false} />
      </div>
      <div className="block">
        <span className="demonstration">格式化 Tooltip</span>
        <Slider value={this.state.value4} formatTooltip={this.formatTooltip.bind(this)} />
      </div>
      <div className="block">
        <span className="demonstration">禁用</span>
        <Slider value={this.state.value3} disabled={true} />
      </div>
    </div>
  )
}

離散值

選項(xiàng)可以是離散的

改變step的值可以改變步長(zhǎng)，通過設(shè)置showStep屬性可以顯示間斷點(diǎn)

constructor(props) {
  super(props);
  this.state = {
    value4: 0,
    value5: 0
  }
}
render() {
  return (
    <div>
      <div className="block">
        <span className="demonstration">不顯示間斷點(diǎn)</span>
        <Slider value={this.state.value4} step="10" />
      </div>
      <div className="block">
        <span className="demonstration">顯示間斷點(diǎn)</span>
        <Slider value={this.state.value5} step="10" showStops={true} />
      </div>
    </div>
  )
}

帶有輸入框

通過輸入框設(shè)置精確數(shù)值

設(shè)置showInput屬性會(huì)在右側(cè)顯示一個(gè)輸入框

constructor(props) {
  super(props);
  this.state = {
    value: 0
  }
}
render() {
  return (
    <div className="block">
      <Slider value={this.state.value} showInput={true} />
    </div>
  )
}

范圍選擇

支持選擇某一數(shù)值范圍

設(shè)置range即可開啟范圍選擇，此時(shí)綁定值是一個(gè)數(shù)組，其元素分別為最小邊界值和最大邊界值

constructor(props) {
  super(props);
  this.state = {
    value: [4, 8]
  }
}
render() {
  return (
    <div className="block">
      <Slider value={this.state.value} max={10} range={true} showStops={true} />
    </div>
  )
}

豎向模式

設(shè)置vertical可使 Slider 變成豎向模式，此時(shí)必須設(shè)置高度height屬性

constructor(props) {
  super(props);
  this.state = {
    value: 0
  }
}
render() {
  return (
    <div className="block">
      <Slider value={this.state.value} vertical={true} height="200px" />
    </div>
  )
}

Attributes

Events