rc-slider
Advanced tools
Comparing version
@@ -65,4 +65,2 @@ 'use strict'; | ||
return { | ||
upperBound: 0, | ||
sliderLength: 0, | ||
value: value, | ||
@@ -78,13 +76,2 @@ active: props.disabled ? '' : value > props.min || props.index > 0 ? 'active' : '' | ||
componentDidMount: function componentDidMount() { | ||
this._onHandleResizeListener = DomUtils.addEventListener(window, 'resize', this.handleResize); | ||
setTimeout(this.handleResize, 0); | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
if (this._onHandleResizeListener) { | ||
this._onHandleResizeListener.remove(); | ||
} | ||
}, | ||
getValue: function getValue() { | ||
@@ -96,8 +83,10 @@ return this.state.value; | ||
var props = this.props; | ||
var value = this.state.value; | ||
if (props.marks.length === 0) { | ||
return 0; | ||
return Math.floor((value - props.min) / props.step); | ||
} else { | ||
var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5); | ||
return Math.ceil(value / unit); | ||
} | ||
var value = this.state.value; | ||
var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5); | ||
return Math.floor(value / unit); | ||
}, | ||
@@ -129,7 +118,7 @@ | ||
var ratio = (value - this.props.min) / (this.props.max - this.props.min); | ||
return ratio * this.state.upperBound; | ||
return ratio * 100 + '%'; | ||
}, | ||
_calcValue: function _calcValue(offset) { | ||
var ratio = offset / this.state.upperBound; | ||
var ratio = offset / this.getSliderLength(); | ||
return ratio * (this.props.max - this.props.min) + this.props.min; | ||
@@ -141,3 +130,2 @@ }, | ||
// pixelOffset -= (this.state.handleSize / 2); | ||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset)); | ||
@@ -242,3 +230,3 @@ | ||
var diffValue = diffPosition / state.sliderLength * (props.max - props.min); | ||
var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min); | ||
var newValue = this._trimAlignValue(state.startValue + diffValue); | ||
@@ -253,13 +241,9 @@ | ||
handleResize: function handleResize() { | ||
var slider = this.refs.slider.getDOMNode(); | ||
var rect = slider.getBoundingClientRect(); | ||
getSliderLength: function getSliderLength() { | ||
var slider = this.refs.slider; | ||
if (!slider) { | ||
return 0; | ||
} | ||
var sliderMin = rect.left; | ||
var sliderMax = rect.right; | ||
this.setState({ | ||
upperBound: slider.clientWidth, | ||
sliderLength: Math.abs(sliderMax - sliderMin) | ||
}); | ||
return slider.getDOMNode().clientWidth; | ||
}, | ||
@@ -320,3 +304,3 @@ | ||
var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1; | ||
var unit = this.state.sliderLength / (stepNum - 1); | ||
var unit = 100 / (stepNum - 1); | ||
@@ -328,9 +312,9 @@ var prefixCls = props.className; | ||
for (var i = 0; i < stepNum; i++) { | ||
var offset = unit * i; | ||
var offset = unit * i + '%'; | ||
var style = { | ||
left: offset.toFixed(5) | ||
left: offset | ||
}; | ||
var className = prefixClsFn(prefixCls, 'dot'); | ||
if (props.isIncluded) { | ||
if (i <= this.getIndex() || this._calcValue(offset) <= this.getValue()) { | ||
if (i <= this.getIndex()) { | ||
className = prefixClsFn(prefixCls, 'dot', 'dot-active'); | ||
@@ -355,13 +339,13 @@ } | ||
var marksLen = marks.length; | ||
var unit = this.state.sliderLength / (marksLen - 1); | ||
var unit = 100 / (marksLen - 1); | ||
var offset = unit * i; | ||
var style = { | ||
width: (unit / 2).toFixed(5) | ||
width: unit / 2 + '%' | ||
}; | ||
if (i === marksLen - 1) { | ||
style.right = -(style.width / 2).toFixed(5); | ||
style.right = -unit / 4 + '%'; | ||
} else { | ||
style.left = i > 0 ? (offset - unit / 4).toFixed(5) : -(style.width / 2).toFixed(5); | ||
style.left = i > 0 ? offset - unit / 4 + '%' : -unit / 4 + '%'; | ||
} | ||
@@ -368,0 +352,0 @@ |
{ | ||
"name": "rc-slider", | ||
"version": "1.2.8", | ||
"version": "1.2.9", | ||
"description": "slider ui component for react", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -141,3 +141,3 @@ # rc-slider | ||
online example: http://react-component.github.io/slider/build/examples/ | ||
online example: http://react-component.github.io/slider/examples/ | ||
@@ -144,0 +144,0 @@ ## Test Case |
21069
-2.91%515
-2.46%