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

import Slider from '../index'
import Tooltip from '../../vc-tooltip'
import '../assets/index.less'
import '../../vc-tooltip/assets/bootstrap.less'

const { Handle } = Slider

function log (value) {
  console.log(value); //eslint-disable-line
}

const CustomizedSlider = {
  data () {
    return {
      value: 50,
    }
  },
  methods: {
    onSliderChange (value) {
      log(value)
      this.value = value
    },
    onAfterChange (value) {
      log(value)
    },
  },
  render () {
    return <Slider value={this.value}
      onChange={this.onSliderChange} onAfterChange={this.onAfterChange}
    />
  },
}

const DynamicBounds = {
  data () {
    return {
      min: 0,
      max: 100,
    }
  },
  methods: {
    onSliderChange (value) {
      log(value)
      this.value = value
    },
    onAfterChange (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 />
        <Slider defaultValue={50} min={this.min} max={this.max}
          onChange={this.onSliderChange}
        />
      </div>
    )
  },
}

const SliderWithTooltip = {
  data () {
    return {
      visibles: [],
    }
  },
  methods: {
    handleTooltipVisibleChange (index, visible) {
      this.visibles[index] = visible
      this.visibles = { ...this.visibles }
    },
    handleRange (h, { value, dragging, index, disabled, style, ...restProps }) {
      const tipFormatter = value => `${value}%`
      const tipProps = { overlayClassName: 'foo' }

      const {
        prefixCls = 'rc-slider-tooltip',
        overlay = tipFormatter(value),
        placement = 'top',
        visible = visible || false,
        ...restTooltipProps } = tipProps

      let handleStyleWithIndex
      if (Array.isArray(style)) {
        handleStyleWithIndex = style[index] || style[0]
      } else {
        handleStyleWithIndex = style
      }

      const tooltipProps = {
        props: {
          prefixCls,
          overlay,
          placement,
          visible: (!disabled && (this.visibles[index] || dragging)) || visible,
          ...restTooltipProps,
        },
        key: index,
      }
      const handleProps = {
        props: {
          value,
          ...restProps,
        },
        on: {
          mouseenter: () => this.handleTooltipVisibleChange(index, true),
          mouseleave: () => this.handleTooltipVisibleChange(index, false),
          visibleChange: log,
        },
        style: {
          ...handleStyleWithIndex,
        },
      }

      return (
        <Tooltip
          {...tooltipProps}
        >

          <Handle
            {...handleProps}
          />
        </Tooltip>
      )
    },
  },
  render () {
    return <Slider handle={this.handleRange} />
  },
}

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

    return (
      <div>
        <div style={style}>
          <p style={pStyle}>Basic Slider</p>
          <Slider onChange={log} />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Slider，`step=20`</p>
          <Slider step={20} defaultValue={50} onBeforeChange={log} />
        </div>

        <div style={style}>
          <p style={pStyle}>Basic Slider，`step=20, dots`</p>
          <Slider dots step={20} defaultValue={100} onAfterChange={log} />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Slider，`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
          <Slider dots step={20} defaultValue={100} onAfterChange={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
        </div>
        <div style={style}>
          <p style={pStyle}>Slider with tooltip, with custom `tipFormatter`</p>
          <SliderWithTooltip />
        </div>
        <div style={style}>
          <p style={pStyle}>Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong></p>
          <Slider
            defaultValue={30}
            maximumTrackStyle={{ backgroundColor: 'red', height: '10px' }}
            minimumTrackStyle={{ backgroundColor: 'blue', height: '10px' }}
            handleStyle={{
              borderColor: 'blue',
              height: '28px',
              width: '28px',
              marginLeft: '-14px',
              marginTop: '-9px',
              backgroundColor: 'black',
            }}
          />
        </div>
        <div style={style}>
          <p style={pStyle}>Slider with custom handle and track style.<strong>(The recommended new api)</strong></p>
          <Slider
            defaultValue={30}
            trackStyle={{ backgroundColor: 'blue', height: '10px' }}
            handleStyle={{
              borderColor: 'blue',
              height: '28px',
              width: '28px',
              marginLeft: '-14px',
              marginTop: '-9px',
              backgroundColor: 'black',
            }}
            railStyle={{ backgroundColor: 'red', height: '10px' }}
          />
        </div>
        <div style={style}>
          <p style={pStyle}>Basic Slider, disabled</p>
          <Slider onChange={log} disabled />
        </div>
        <div style={style}>
          <p style={pStyle}>Controlled Slider</p>
          <Slider value={50} />
        </div>
        <div style={style}>
          <p style={pStyle}>Customized Slider</p>
          <CustomizedSlider />
        </div>
        <div style={style}>
          <p style={pStyle}>Slider with dynamic `min` `max`</p>
          <DynamicBounds />
        </div>
      </div>
    )
  },
}