add vc-slider-demo

components/vc-slider/demo/handle.jsx

@@ -19,7 +19,7 @@ export default {
   },
   render () {
     const handle = (h, props) => {
-      const { value, dragging, index, refStr, ...restProps } = props
+      const { value, dragging, index, refStr, style, ...restProps } = props
       const handleProps = {
         props: {
           ...restProps,
@@ -29,6 +29,7 @@ export default {
           refStr,
         },
         key: index,
+        style,
       }
       return (
         <Tooltip
@@ -44,9 +45,8 @@ export default {
       )
     }
 
-    const handleRange = (h, { value, dragging, index, disabled, ...restProps }) => {
+    const handleRange = (h, { value, dragging, index, disabled, style, ...restProps }) => {
       const tipFormatter = value => `${value}%`
-      const handleStyle = [{}]
       const tipProps = {}
 
       const {
@@ -57,10 +57,10 @@ export default {
         ...restTooltipProps } = tipProps
 
       let handleStyleWithIndex
-      if (Array.isArray(handleStyle)) {
+      if (Array.isArray(style)) {
-        handleStyleWithIndex = handleStyle[index] || handleStyle[0]
+        handleStyleWithIndex = style[index] || style[0]
       } else {
-        handleStyleWithIndex = handleStyle
+        handleStyleWithIndex = style
       }
 
       const tooltipProps = {

components/vc-slider/demo/marks.jsx

@@ -0,0 +1,56 @@
+import Slider from '../index'
+import '../assets/index.less'
+
+export default {
+  render () {
+    const style = { width: '400px', margin: '50px' }
+    const pStyle = { margin: '20px 0' }
+    const marks = {
+      '-10': '-10°C',
+      0: <strong>0°C</strong>,
+      26: '26°C',
+      37: '37°C',
+      50: '50°C',
+      100: {
+        style: {
+          color: 'red',
+        },
+        label: <strong>100°C</strong>,
+      },
+    }
+
+    function log (value) {
+      console.log(value); //eslint-disable-line
+    }
+    return (
+      <div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `step=null`</p>
+          <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps</p>
+          <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `included=false`</p>
+          <Slider min={-10} marks={marks} included={false} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps, `included=false`</p>
+          <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Range with marks</p>
+          <Slider.Range min={-10} marks={marks} onChange={log} defaultValue={[20, 25, 30, 40]} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range with marks and steps</p>
+          <Slider.Range min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+        </div>
+      </div>
+    )
+  },
+}

components/vc-slider/demo/range.jsx

@@ -0,0 +1,209 @@
+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>
+    )
+  },
+}

components/vc-slider/demo/slider.jsx

@@ -0,0 +1,223 @@
+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),
+          change: 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>
+    )
+  },
+}

components/vc-slider/demo/vertical.jsx

@@ -0,0 +1,57 @@
+import Slider from '../index'
+import '../assets/index.less'
+
+export default {
+  render () {
+    const style = { float: 'left', width: '160px', height: '400px', marginBottom: '160px', marginLeft: '50px' }
+    const parentStyle = { overflow: 'hidden' }
+    const pStyle = { margin: '20px 0' }
+    const marks = {
+      '-10': '-10°C',
+      0: <strong>0°C</strong>,
+      26: '26°C',
+      37: '37°C',
+      50: '50°C',
+      100: {
+        style: {
+          color: 'red',
+        },
+        label: <strong>100°C</strong>,
+      },
+    }
+
+    function log (value) {
+      console.log(value); //eslint-disable-line
+    }
+    return (
+      <div style={parentStyle}>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `step=null`</p>
+          <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps</p>
+          <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `included=false`</p>
+          <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps, `included=false`</p>
+          <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Range with marks</p>
+          <Slider.Range vertical min={-10} marks={marks} onChange={log} defaultValue={[20, 25, 30, 40]} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range with marks and steps</p>
+          <Slider.Range vertical min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+        </div>
+      </div>
+    )
+  },
+}

components/vc-slider/src/Handle.jsx

@@ -102,7 +102,6 @@ export default {
         refStr,
         ...ariaProps,
       },
-      style: elStyle,
       class: className,
       on: {
         blur: this.onBlur,
@@ -115,6 +114,7 @@ export default {
     return (
       <div
         {...handleProps}
+        style={elStyle}
       />
     )
   },

components/vc-slider/src/Range.jsx

@@ -86,8 +86,8 @@ const Range = {
       const isNotControlled = !hasProp(this, 'value')
       if (isNotControlled) {
         this.setState(state)
-      } else if (state.handle !== undefined) {
+      } else if (state.sHandle !== undefined) {
-        this.setState({ sHandle: state.handle })
+        this.setState({ sHandle: state.sHandle })
       }
 
       const data = { ...this.$data, ...state }
@@ -110,10 +110,9 @@ const Range = {
 
       const prevValue = bounds[this.prevMovedHandleIndex]
       if (value === prevValue) return
-
       const nextBounds = [...bounds]
       nextBounds[this.prevMovedHandleIndex] = value
-      this.$emit('change', { bounds: nextBounds })
+      this.onChange({ bounds: nextBounds })
     },
     onEnd () {
       this.setState({ sHandle: null })

components/vc-slider/src/common/createSlider.jsx

@@ -43,7 +43,7 @@ export default function createSlider (Component) {
       max: 100,
       step: 1,
       marks: {},
-      handle (h, { index, refStr, className, ...restProps }) {
+      handle (h, { index, refStr, className, style, ...restProps }) {
         delete restProps.dragging
         const handleProps = {
           props: {
@@ -53,6 +53,7 @@ export default function createSlider (Component) {
             refStr,
           },
           class: className,
+          style,
           key: index,
         }
         return <Handle {...handleProps} />
@@ -67,6 +68,10 @@ export default function createSlider (Component) {
       dotStyle: {},
       activeDotStyle: {},
     }),
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
     data () {
       if (process.env.NODE_ENV !== 'production') {
         const { step, max, min } = this
@@ -147,6 +152,7 @@ export default function createSlider (Component) {
         }
       },
       onBlur (e) {
+        console.dir(e)
         this.onEnd(e)
         this.$emit('blur', e)
       },