Slider.san

<template>
    <div class="sm-form-item">
        <label class="label">{{label}}</label>
        <div class="input-box">
            <san-slider
                on-change="handleSlideChange($event)"
                value="{{value}}"
                min="{{min}}"
                max="{{max}}"
                step="{{step}}"
            />
            <san-input-number
                min="{{min}}"
                max="{{max}}"
                step="{{step}}"
                value="{=value=}"
                on-change="handlerChange($event)"
                size="small">
            </san-input-number>
        </div>
    </div>
</template>

<script>
import Slider from 'san-mui/Slider';
import InputNumber from 'san-mui/InputNumber';
export default {
    components: {
        'san-slider': Slider,
        'san-input-number': InputNumber
    },
    initData() {
        return {
            value: '0',
            label: '',
            max: 0,
            min: 0,
            step: 0
        };
    },
    handleSlideChange(val) {
        this.data.set('value', val.toString());
    }
};
</script>

<style lang="stylus">
    .sm-form-item
        .input-box
            margin-top 10px
            .sm-slider
                display inline-block
                margin-right 20px
                margin-top 4px
                float left
                width 100px
                .sm-slider-thumb
                    transform translate(0, -50%)
            .sm-inputNumber
                width 130px
                display inline-block

</style>