ant-design-vue/components/vc-slider/demo/range.jsx

import Slider from '../index'
import '../assets/index.less'
const { Range } = Slider
function log (value) {
  console.log(value); //eslint-disable-line
}

const CustomizedRange = {
  data () {
    return {
      lowerBound: 20,
      upperBound: 40,
      value: [20, 40],
    }
  },
  methods: {
    onLowerBoundChange (e) {
      this.lowerBound = +e.target.value
    },
    onUpperBoundChange (e) {
      this.upperBound = +e.target.value
    },
    onSliderChange (value) {
      log(value)
      this.value = value
    },
    handleApply () {
      this.value = [this.lowerBound, this.upperBound]
    },
  },
  render () {
    return (
      <div>
        <label>LowerBound: </label>
        <input type='number' value={this.lowerBound} onChange={this.onLowerBoundChange} />
        <br />
        <label>UpperBound: </label>
        <input type='number' value={this.upperBound} onChange={this.onUpperBoundChange} />
        <br />
        <button onClick={this.handleApply}>Apply</button>
        <br /><br />
        <Range allowCross={false} value={this.value} onChange={this.onSliderChange} />
      </div>
    )
  },
}

const DynamicBounds = {
  data () {
    return {
      min: 0,
      max: 100,
    }
  },
  methods: {
    onSliderChange (value) {
      log(value)
    },
    onMinChange (e) {
      this.min = +e.target.value || 0
    },
    onMaxChange (e) {
      this.max = +e.target.value || 100
    },
  },
  render () {
    return (
      <div>
        <label>Min: </label>
        <input type='number' value={this.min} onInput={this.onMinChange} />
        <br />
        <label>Max: </label>
        <input type='number' value={this.max} onInput={this.onMaxChange} />
        <br /><br />
        <Range defaultValue={[20, 50]} min={this.min} max={this.max}
          onChange={this.onSliderChange}
        />
      </div>
    )
  },
}

const ControlledRange = {
  data () {
    return {
      value: [20, 40, 60, 80],
    }
  },
  methods: {
    handleChange (value) {
      this.value = value
    },
  },
  render () {
    return <Range value={this.value} onChange={this.handleChange} />
  },
}

const ControlledRangeDisableAcross = {
  props: {
    pushable: [Number, Boolean],
  },
  data () {
    return {
      value: [20, 40, 60, 80],
    }
  },
  methods: {
    handleChange (value) {
      this.value = value
    },
  },
  render () {
    const rangeRange = {
      props: {
        value: this.value,
        allowCross: false,
        ...this.$props,
      },
      on: {
        change: this.handleChange,
      },
    }
    return <Range
      {...rangeRange}
    />
  },
}

const PureRenderRange = {
  data () {
    return {
      foo: false,
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
      this.foo = !this.foo
    },
  },
  render () {
    return <Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
  },
}

export default {
  render () {
    const style = { width: '400px', margin: '50px' }
    const pStyle = { margin: '20px 0' }

    return (
      <div>
        <div style={style}>
          <p style={pStyle}>Basic Range，`allowCross=false`</p>
          <Range allowCross={false} defaultValue={[0, 20]} onChange={log} />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Range，`step=20` </p>
          <Range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Range，`step=20, dots` </p>
          <Range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Range，disabled</p>
          <Range allowCross={false} defaultValue={[0, 20]} onChange={log} disabled />
        </div>
        <div style={style}>
          <p style={pStyle}>Controlled Range</p>
          <ControlledRange />
        </div>
        <div style={style}>
          <p style={pStyle}>Controlled Range, not allow across</p>
          <ControlledRangeDisableAcross />
        </div>
        <div style={style}>
          <p style={pStyle}>Controlled Range, not allow across, pushable=5</p>
          <ControlledRangeDisableAcross pushable={5} />
        </div>
        <div style={style}>
          <p style={pStyle}>Multi Range</p>
          <Range count={3} defaultValue={[20, 40, 60, 80]} pushable />
        </div>
        <div style={style}>
          <p style={pStyle}>Multi Range with custom track and handle style</p>
          <Range count={3} defaultValue={[20, 40, 60, 80]} pushable
            trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
            handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
            railStyle={{ backgroundColor: 'black' }}
          />
        </div>
        <div style={style}>
          <p style={pStyle}>Customized Range</p>
          <CustomizedRange />
        </div>
        <div style={style}>
          <p style={pStyle}>Range with dynamic `max` `min`</p>
          <DynamicBounds />
        </div>
        <div style={style}>
          <p style={pStyle}>Range as child component</p>
          <PureRenderRange />
        </div>
      </div>
    )
  },
}