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

Support for range labels on <Slider>

Browse source
This commit is contained in:
Fabio Manganiello 2022-11-27 00:55:19 +01:00
parent f8aaab20f5
commit bd59a5eefd
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 48 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,29 @@
<template>
<label class="slider-wrapper">
<input class="slider"
type="range"
:class="{'with-label': withLabel}"
:min="range[0]"
:max="range[1]"
:step="step"
:disabled="disabled"
:value="value"
ref="range"
@input.stop="onUpdate"
@change.stop="onUpdate">
<span class="range-labels" :class="{'with-label': withLabel}" v-if="withRange">
<span class="label left" v-if="withRange" v-text="range[0]" />
<span class="label right" v-if="withRange" v-text="range[1]" />
</span>
<div class="track" :class="{'with-label': withLabel}">
<div class="track-inner" ref="track"></div>
</div>
<div class="thumb" ref="thumb"></div>
<span class="label" v-if="withLabel" v-text="value" ref="label"></span>
<span class="slider-container">
<input class="slider"
type="range"
:class="{'with-label': withLabel}"
:min="range[0]"
:max="range[1]"
:step="step"
:disabled="disabled"
:value="value"
ref="range"
@input.stop="onUpdate"
@change.stop="onUpdate">
<div class="track" :class="{'with-label': withLabel}">
<div class="track-inner" ref="track"></div>
</div>
<div class="thumb" ref="thumb"></div>
<span class="label" v-if="withLabel" v-text="value" ref="label"></span>
</span>
</label>
</template>
@ -47,6 +54,11 @@ export default {
withLabel: {
type: Boolean,
default: false,
},
withRange: {
type: Boolean,
default: false,
}
},
@ -77,6 +89,7 @@ export default {
mounted() {
if (this.value != null)
this.update(this.value)
this.$watch(() => this.value, (newValue) => this.update(newValue))
},
}
</script>
@ -88,6 +101,13 @@ $label-width: 3em;
width: 100%;
display: flex;
position: relative;
flex-direction: column;
.slider-container {
width: 100%;
display: flex;
position: relative;
}
.slider {
width: 100%;
@ -99,6 +119,18 @@ $label-width: 3em;
}
}
.range-labels {
width: 100%;
&.with-label {
width: calc(100% - $label-width);
}
.right {
@extend .pull-right;
}
}
.track {
width: 100%;
height: 0.75em;