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

基礎(chǔ)用法

在拖動滑塊時，顯示當(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">默認</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>
  )
}

離散值

選項可以是離散的

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

constructor(props) {
  super(props);


  this.state = {
    value4: 0,
    value5: 0
  }
}


render() {
  return (
    <div>
      <div className="block">
        <span className="demonstration">不顯示間斷點</span>
        <Slider value={this.state.value4} step="10" />
      </div>
      <div className="block">
        <span className="demonstration">顯示間斷點</span>
        <Slider value={this.state.value5} step="10" showStops={true} />
      </div>
    </div>
  )
}

帶有輸入框

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

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

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ù)組，其元素分別為最小邊界值和最大邊界值

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è)置高度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