42 lines
863 B
Vue
42 lines
863 B
Vue
<template>
|
|
<div class="row">
|
|
<label
|
|
class="form-label col-9 col-sm-3 text-sm-end text-capitalize pr-1"
|
|
:for="id"
|
|
>
|
|
<slot></slot>
|
|
</label>
|
|
<span class="col-3 col-sm-1 text-end"> {{ value }} </span>
|
|
<div class="col">
|
|
<input
|
|
type="range"
|
|
class="form-range"
|
|
:id="id"
|
|
@input="sliderCallback"
|
|
:value="value"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "RangeSlider",
|
|
props: {
|
|
value: Number,
|
|
},
|
|
methods: {
|
|
sliderCallback: function (event) {
|
|
if (event.target.nodeName == "INPUT") {
|
|
this.$emit("update:value", Number(event.target.value));
|
|
console.log("s:" + this.value);
|
|
}
|
|
},
|
|
},
|
|
setup(props, { slots }) {
|
|
const id = slots.default()[0].children + "-controlRange";
|
|
return { id };
|
|
},
|
|
};
|
|
</script>
|