<template>
    <div class="ht-base-slider-icon-demo">
        <ht-base-icon :style="{color: preColor}" type="LiRa_misery" size=24 />
        <ht-base-slider class="demo-slider" :min="0" :max="20" @on-input="handleChange" :value="value"/>
        <ht-base-icon :style="{color: nextColor}" type="LiRa_smile" size=24 />
    </div>
</template>

<script>
    export default {
        name: 'HtBaseSliderIconDemo',
        data() {
            return {
                value: 10,
                min: 0,
                max: 20,
            }
        },
        methods: {
            handleChange(value) {
                this.value = value
            }
        },
        computed: {
            preColor() {
                const {max, min, value} = this
                const mid = ((max - min) / 2).toFixed(5);
                return value >= mid ? '' : 'rgba(0, 0, 0, .45)';
                const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
            },
            nextColor() {
                const {max, min, value} = this
                const mid = ((max - min) / 2).toFixed(5);
                return value >= mid ? 'rgba(0, 0, 0, .45)' : '';
            }
        }
    }
</script>
<style lang="less">
    .ht-base-slider-icon-demo {
        display: flex;
        .demo-slider{
            width: 95%;
            margin: 0 10px;
        }
    }
</style>
