滑动选择器

<script setup lang="ts">
    import { Slider } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <div>
            <div>默认</div>
            <Slider aria-label="默认滑动输入条" showBoundary />
        </div>
        <br />
        <br />
        <div>
            <div>范围</div>
            <Slider aria-label="范围滑动输入条" :defaultValue="[20, 60]" range />
        </div>
        <br />
        <br />
        <div>
            <div>禁用</div>
            <Slider aria-label="禁用滑动输入条" :defaultValue="40" disabled />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { InputNumber, Slider } from '@fibrous/semi-ui-vue';

    const value = ref(10);

    const getSliderValue = (newValue: number | string | number[]) => {
        if (isNaN(Number(newValue))) {
            return;
        }
        value.value = Number(newValue);
    };
</script>

<template>
    <div>
        <div :style="{ width: '320px', marginRight: '15px' }">
            <Slider aria-label="数值" :modelValue="value" :step="1" @change="getSliderValue" />
        </div>
        <InputNumber aria-label="数值" :max="100" :min="0" :modelValue="value" :style="{ width: '100px' }" @change="getSliderValue" />
    </div>
</template>

<script setup lang="ts">
    import { Slider } from '@fibrous/semi-ui-vue';

    const formatPercent = (value: number) => `${value}%`;
</script>

<template>
    <div>
        <Slider aria-label="带提示的滑块" :getAriaValueText="formatPercent" :tipFormatter="formatPercent" />
        <br />
        <br />
        <Slider aria-label="不带提示的滑块" :tipFormatter="null" />
    </div>
</template>

<script setup lang="ts">
    import { Slider } from '@fibrous/semi-ui-vue';

    const stepTenMarks = { 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' };
    const stepTenthMarks = { 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' };
    const celsiusMarks = { 20: '20°C', 40: '40°C' };
    const formatCelsius = (value: number) => `${value}°C`;
</script>

<template>
    <div>
        <div id="slider-marks-step-10">step=10</div>
        <Slider aria-labelledby="slider-marks-step-10" :defaultValue="[10, 100]" :marks="stepTenMarks" range :step="10" />
        <br />
        <br />
        <div id="slider-marks-step-01">step=0.1</div>
        <Slider aria-labelledby="slider-marks-step-01" :defaultValue="[0.1, 0.5]" :marks="stepTenthMarks" :max="1" :min="0" range :step="0.1" />
        <br />
        <br />
        <div id="slider-marks-marks">Marks</div>
        <Slider aria-labelledby="slider-marks-marks" :defaultValue="[0, 100]" :getAriaValueText="formatCelsius" :marks="celsiusMarks" range :tipFormatter="formatCelsius" />
        <br />
        <br />
        <div id="slider-marks-included">Included</div>
        <Slider aria-labelledby="slider-marks-included" :defaultValue="[0, 100]" :getAriaValueText="formatCelsius" :included="false" :marks="celsiusMarks" range :tipFormatter="formatCelsius" />
    </div>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Slider } from '@fibrous/semi-ui-vue';

    const range = [10, 100];

    const getRailStyle = (value: number[]) => {
        // transparent lets the middle segment show the track color
        const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];
        const gradientPos = value.map((val) => Number(((val - range[0]) / (range[1] - range[0])).toFixed(2)) * 100);
        return {
            background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`,
        };
    };

    const value = ref([20, 60]);

    const changeValue = (newValue: number | number[]) => {
        if (Array.isArray(newValue)) {
            value.value = newValue;
        }
    };

    const railStyle = computed(() => getRailStyle(value.value));
</script>

<template>
    <Slider aria-label="Value range" :max="range[1]" :min="range[0]" :modelValue="value" :railStyle="railStyle" range @change="changeValue" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Slider } from '@fibrous/semi-ui-vue';

    const value = ref(10);

    const changeValue = () => {
        value.value += 10;
    };
</script>

<template>
    <div>
        <Button :style="{ marginRight: '20px' }" @click="changeValue">点击改变value值</Button>
        <br />
        <br />
        <Slider aria-label="受控滑块" :modelValue="value" />
    </div>
</template>

<script setup lang="ts">
    import { Slider } from '@fibrous/semi-ui-vue';

    const boxStyle = {
        height: '300px',
        marginLeft: '30px',
        marginTop: '10px',
        paddingRight: '30px',
        display: 'inline-block',
    };
    const marks = { 20: '20°C', 40: '40°C' };
</script>

<template>
    <div>
        <div :style="boxStyle">
            <Slider aria-label="Vertical slider" vertical />
        </div>
        <div :style="boxStyle">
            <Slider aria-label="Reversed vertical slider" vertical verticalReverse />
        </div>
        <div :style="boxStyle">
            <Slider aria-label="Vertical range slider" :defaultValue="[20, 60]" range vertical />
        </div>
        <div :style="boxStyle">
            <Slider aria-label="Reversed vertical range slider" :defaultValue="[20, 60]" range vertical verticalReverse />
        </div>
        <div :style="boxStyle">
            <Slider aria-label="Vertical range slider with marks" :defaultValue="[20, 60]" :marks="marks" range :step="10" vertical />
        </div>
        <div :style="boxStyle">
            <Slider aria-label="Reversed vertical range slider with marks" :defaultValue="[20, 60]" :marks="marks" range :step="10" vertical verticalReverse />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Slider } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <div>
            <div id="slider-handle-dot-default">Default</div>
            <Slider aria-labelledby="slider-handle-dot-default" :handleDot="{ size: '4px', color: 'blue' }" showBoundary />
        </div>
        <br />
        <br />
        <div>
            <div id="slider-handle-dot-range">Range</div>
            <Slider
                aria-labelledby="slider-handle-dot-range"
                :defaultValue="[20, 60]"
                :handleDot="[
                    { size: '4px', color: 'blue' },
                    { size: '4px', color: 'pink' },
                ]"
                range
            />
        </div>
    </div>
</template>