diff --git a/src/slider/index.js b/src/slider/index.js index 3e70cf4..ef87807 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -27,7 +27,7 @@ class Slider extends Component { static styles = [ css` :host { - display: block; + display: inline-block; width: 100%; height: 38px; } @@ -90,7 +90,7 @@ class Slider extends Component { font-size: 12px; line-height: 1.2; min-width: 10px; - word-wrap: break-word; + white-space: nowrap; color: #fff; background: #303133; transform: translateX(-50%); @@ -101,7 +101,7 @@ class Slider extends Component { &:after { position: absolute; border: 6px solid transparent; - bottom: -12px; + bottom: -10px; left: 50%; transform: translateX(-50%); content: ''; @@ -142,6 +142,9 @@ class Slider extends Component { transform: translate(-50%, -180%); } } + :host([hide-tooltip]) .tips { + visibility: hidden; + } :host([loading]), :host([disabled]) { @@ -180,6 +183,7 @@ class Slider extends Component { this.$dotWrap = this.$refs.dotWrap this.$runway = this.$refs.runway this.$tips = this.$refs.tips + this.accuracy = this.step >= 1 ? 0 : String(this.step).split('.')[1].length this.initValue(this.value) } onMousedown(e) { @@ -191,13 +195,14 @@ class Slider extends Component { progress, vertical, disabled, - readOnly + readOnly, + accuracy } = this if (disabled || readOnly) { return } this.$tips.classList.toggle('show') - preValue = preValue || min + preValue = +preValue || min const start = vertical ? e.clientY : e.clientX const onMousemove = bind(document, 'mousemove', e => { @@ -208,15 +213,26 @@ class Slider extends Component { (vertical ? this.$runway.clientHeight : this.$runway.clientWidth)) * (vertical ? -1 : 1) - const diff = Math.round(scale * (max - min)) + const diff = + accuracy === 0 ? Math.round(scale * (max - min)) : scale * (max - min) let newProgress = progress + Math.floor(scale * 100) - let newValue = Math.floor(preValue + diff) + let newValue = + accuracy === 0 ? Math.floor(preValue + diff) : preValue + diff newValue = Math.max(newValue, min) newValue = Math.min(newValue, max) - if (newValue % step) { - return + + if (accuracy === 0) { + if (newValue % step) { + return + } + } else { + let _newValue = Math.round(newValue * Math.pow(10, accuracy)) + let _step = step * Math.pow(10, accuracy) + if (_newValue % _step) { + return + } } - this.value = newValue + this.value = newValue.toFixed(accuracy) requestAnimationFrame(() => { this.setProgress(vertical ? 100 - newProgress : newProgress) }) @@ -234,7 +250,7 @@ class Slider extends Component { if (e.target !== this.$refs.runway) { return } - const { max, min, step, vertical, disabled, readOnly } = this + let { max, min, step, vertical, disabled, readOnly, accuracy } = this if (disabled || readOnly) { return } @@ -244,8 +260,11 @@ class Slider extends Component { const scale = (vertical ? offsetY : offsetX) / (vertical ? clientHeight : clientWidth) - let newValue = Math.floor(scale * range + min) - const mod = newValue % step + step *= Math.pow(10, accuracy) + + let newValue = + +(scale * range + min).toFixed(accuracy) * Math.pow(10, accuracy) + let mod = +(newValue % step).toFixed(accuracy) if (mod) { const half = step / 2 if (mod > half) { @@ -254,10 +273,13 @@ class Slider extends Component { newValue -= mod } } - this.value = vertical ? range - newValue : newValue + + newValue *= Math.pow(10, -accuracy) + this.value = (vertical ? range - newValue : newValue).toFixed(accuracy) const progress = Math.floor(((newValue - min) / range) * 100) this.setProgress(progress) this.$emit('change') + this.$emit('input') if (!this.timeout) { this.$tips.classList.toggle('show') } else {