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>
    );
  },
};