137 lines
2.9 KiB
Vue
137 lines
2.9 KiB
Vue
<template>
|
|
<div class="volume-wrapper">
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
|
<input class="volume" :disabled="disabled"
|
|
type="range" min="0" max="100" v-model="maxValue"
|
|
:style="`--value: ${value}%; --max-value: ${maxValue}%; --actual-value: ${value * (maxValue / 100)}%`"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
|
|
|
|
@Component
|
|
export default class Channel extends Vue {
|
|
private name = "VolumeSlider";
|
|
|
|
private maxValue = 80;
|
|
@Prop() public value!: number;
|
|
@Prop() public disabled!: boolean;
|
|
|
|
private mounted() {
|
|
this.onMaxValueChange();
|
|
}
|
|
|
|
@Watch("value")
|
|
@Watch("maxValue")
|
|
private onMaxValueChange() {
|
|
this.$emit("valueChange", this.value * (this.maxValue / 100), this.maxValue);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.volume-wrapper {
|
|
--height: 180px;
|
|
--width: 30px;
|
|
height: var(--height);
|
|
width: var(--width);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.volume {
|
|
position: relative;
|
|
width: var(--height);
|
|
min-width: var(--height);
|
|
height: var(--width);
|
|
min-height: var(--width);
|
|
left: calc(var(--height) / 2 * -1 + var(--width) / 2);
|
|
transform: rotate(270deg);
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=range] {
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@mixin range-track() {
|
|
height: 10px;
|
|
cursor: pointer;
|
|
background: linear-gradient(90deg,
|
|
black 0,
|
|
black var(--actual-value), white var(--actual-value),
|
|
white var(--max-value), transparent var(--max-value), transparent 100%);
|
|
border: 1px solid #010101;
|
|
}
|
|
|
|
|
|
@mixin range-thumb {
|
|
border: 1px solid #000000;
|
|
height: 24px;
|
|
width: 12px;
|
|
background: #ffffff;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
@include range-track;
|
|
}
|
|
|
|
input[type=range]::-moz-range-track {
|
|
@include range-track;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
@include range-thumb;
|
|
-webkit-appearance: none;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb {
|
|
@include range-thumb;
|
|
}
|
|
|
|
/*
|
|
input[type=range]::-ms-track {
|
|
width: 100%;
|
|
height: 8.4px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-width: 16px 0;
|
|
color: transparent;
|
|
}
|
|
input[type=range]::-ms-fill-lower {
|
|
background: #2a6495;
|
|
border: 0.2px solid #010101;
|
|
border-radius: 2.6px;
|
|
}
|
|
input[type=range]::-ms-fill-upper {
|
|
background: #3071a9;
|
|
border: 0.2px solid #010101;
|
|
border-radius: 2.6px;
|
|
}
|
|
input[type=range]::-ms-thumb {
|
|
border: 1px solid #000000;
|
|
height: 36px;
|
|
width: 16px;
|
|
border-radius: 3px;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
input[type=range]:focus::-ms-fill-lower {
|
|
background: #3071a9;
|
|
}
|
|
input[type=range]:focus::-ms-fill-upper {
|
|
background: #367ebd;
|
|
}*/
|
|
|
|
</style>
|