<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 = 50;
  @Prop() public value!: number;
  @Prop() public disabled!: boolean;

  private mounted() {
    this.onMaxValueChange();
  }

  @Watch("maxValue")
  private onMaxValueChange() {
    this.$emit("maxValueChange", 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>
