滑块

横向滑块

<template>
    <div class="demo-slider-row" style="width: 500px;">
        <t-slider v-model="value1"/>
    </div>
    <div class="demo-slider-row" style="width: 500px;">
        <t-slider v-model="value2" range :tooltipProps="{}"/>
    </div>
</template>
<script>
export default {
  data() {
    return {
        value1: 12,
        value2: [30, 70],
        tooltipProps: {},
    };
  },
};
</script>

显示代码 复制代码 复制代码

纵向滑块

<template>
    <div class="demo-slider-row__vertical" style="height: 150px;">
        <t-slider v-model="value1" :layout="layout" :show-tooltip="true" />
    </div>
    <div class="demo-slider-row__vertical" style="height: 150px;">
        <t-slider v-model="value2" :layout="layout" range :show-tooltip="true" />
    </div>
</template>
<script>
export default {
  data() {
    return {
        value1: 12,
        value2: [30, 70],
       layout: 'vertical',
    };
  },
};
</script>

显示代码 复制代码 复制代码

带刻度值的滑块

0°C

20°C

40°C

60°C

80°C

100°C

0°C

20°C

40°C

60°C

80°C

100°C

<template>
    <div class="demo-slider-row" style="width: 400px;">
        <t-slider v-model="value1" :show-tooltip="true" :marks="marks1" />
    </div>
    <div class="demo-slider-row" style="width: 400px;margin: 40px 0;">
        <t-slider v-model="value2" range :show-tooltip="true" :marks="marks2" />
    </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 12,
      value2: [30, 70],
      marks1: {
        0: '0°C',
        20: '20°C',
        40: '40°C',
        60: '60°C',
        80: <span style="color: #0077ff">80°C</span>,
        100: <span style="color: #0077ff">100°C</span>,
      },
      marks2: {
        0: '0°C',
        20: '20°C',
        40: '40°C',
        60: '60°C',
        80: <span style="color: #0077ff">80°C</span>,
        100: '100°C',
      },
    };
  },
};
</script>

显示代码 复制代码 复制代码

数字输入框滑块

GB

<template>
    <div class="demo-slider-row" style="width: 400px;">
        <t-slider v-model="value1" :show-tooltip="true" inputNumberProps/>
    </div>
    <div class="demo-slider-row" style="width: 400px;">
        <t-slider v-model="value2" range :show-tooltip="true" :inputNumberProps="inputNumberProps" />
    </div>
    <div class="demo-slider-row" style="width: 400px;">
        <div class="care-slider__container">
            <t-slider v-model="value2" range :show-tooltip="true" :inputNumberProps="inputNumberProps" />
            <span class="care-slider__input-txt">GB</span>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 12,
      value2: [30, 70],
      inputNumberProps: { theme: 'column' },
    };
  },
};
</script>

显示代码 复制代码 复制代码

垂直输入框滑块

GB

<template>
    <div class="demo-slider-row__vertical" style="height: 200px;">
        <t-slider v-model="value1" :layout="layout" :show-tooltip="true" inputNumberProps/>
    </div>
    <div class="demo-slider-row__vertical" style="height: 200px;">
        <t-slider v-model="value2" range :layout="layout" :show-tooltip="true" :inputNumberProps="inputNumberProps" />
    </div>
    <div class="demo-slider-row__vertical" style="height: 200px;">
        <div class="care-slider__container is-vertical">
            <t-slider v-model="value2" range :layout="layout" :show-tooltip="true" :inputNumberProps="inputNumberProps" />
            <span class="care-slider__input-txt">GB</span>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 12,
      value2: [30, 70],
      inputNumberProps: { theme: 'column' },
      layout: 'vertical',
    };
  },
};
</script>

显示代码 复制代码 复制代码