Support for range labels on <Slider>

This commit is contained in:
Fabio Manganiello 2022-11-27 00:55:19 +01:00
parent f8aaab20f5
commit bd59a5eefd
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

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