blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixed slider ranges and label

Browse source
This commit is contained in:
Fabio Manganiello 2022-10-12 02:59:50 +02:00
parent 041f64c80f
commit e617fc75d4
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
platypush/backend/http/webapp/src/components/elements/Slider.vue
View file

@ -1,7 +1,14 @@
<template> <template>
<label class="slider-wrapper"> <label class="slider-wrapper">
<input class="slider" type="range" ref="range" :min="range[0]" :max="range[1]" <input class="slider"
:step="step" :disabled="disabled" :value="value" type="range"
:class="{'with-label': withLabel}"
:min="range[0]"
:max="range[1]"
:step="step"
:disabled="disabled"
:value="value"
ref="range"
@input.stop="onUpdate" @input.stop="onUpdate"
@change.stop="onUpdate" @change.stop="onUpdate"
@mouseup.stop="onUpdate" @mouseup.stop="onUpdate"
@ -11,11 +18,11 @@
@keyup.stop="onUpdate" @keyup.stop="onUpdate"
@keydown.stop="onUpdate"> @keydown.stop="onUpdate">
<div class="track"> <div class="track" :class="{'with-label': withLabel}">
<div class="track-inner" ref="track"></div> <div class="track-inner" ref="track"></div>
</div> </div>
<div class="thumb" ref="thumb"></div> <div class="thumb" ref="thumb"></div>
<span class="label" v-if="withLabel" v-text="value"></span> <span class="label" v-if="withLabel" v-text="value" ref="label"></span>
</label> </label>
</template> </template>
@ -62,10 +69,14 @@ export default {
}, },
update(value) { update(value) {
const percent = ((value - this.range[0]) * 100) / (this.range[1] - this.range[0]) const sliderWidth = this.$refs.range.clientWidth
this.$refs.thumb.style.left = `${percent}%` const percent = (value - this.range[0]) / (this.range[1] - this.range[0])
const innerWidth = percent * sliderWidth
const thumb = this.$refs.thumb
thumb.style.left = `${innerWidth - thumb.clientWidth / 2}px`
this.$refs.thumb.style.transform = `translate(-${percent}%, -50%)` this.$refs.thumb.style.transform = `translate(-${percent}%, -50%)`
this.$refs.track.style.width = `${percent}%` this.$refs.track.style.width = `${innerWidth}px`
}, },
}, },
@ -77,6 +88,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$label-width: 3em;
.slider-wrapper { .slider-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
@ -109,6 +122,10 @@ export default {
background: $slider-progress-bg; background: $slider-progress-bg;
border-radius: 0.5em 0 0 0.5em; border-radius: 0.5em 0 0 0.5em;
} }
&.with-label {
width: calc(100% - $label-width);
}
} }
.thumb { .thumb {
@ -124,12 +141,11 @@ export default {
pointer-events: none; pointer-events: none;
} }
label {
position: relative;
.label { .label {
width: $label-width;
position: relative;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
} }
}
} }
</style> </style>