Sard Uniapp

Appearance

在新窗口打开⤴

Slider滑块

介绍 ​

选择给定范围的一个值和区间。

引入 ​

js
import Slider from 'sard-uniapp/components/slider/slider.vue'

代码演示 ​

基础使用 ​

使用 v-model 绑定当前值。

vue
<template>
  <sar-slider v-model="value" @input="onInput" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)

const onInput = (value: any) => {
  console.log('input', value)
}

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-slider v-model="value" @input="onInput" @change="onChange" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref(50);
const onInput = (value2) => {
  console.log("input", value2);
};
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

范围选择 ​

使用 range 属性设置成范围选择。

vue
<template>
  <sar-slider v-model="value" range />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref([20, 80])
</script>
vue
<template>
  <sar-slider v-model="value" range />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref([20, 80]);
</script>

显示值 ​

设置 show-value 属性会在滑块上方显示当前滑块对应的值。

vue
<template>
  <doc-title>单滑块</doc-title>
  <sar-slider :model-value="50" show-value />

  <doc-title>双滑块</doc-title>
  <sar-slider :model-value="[20, 80]" range show-value />
</template>

最大最小值 ​

使用 min 和 max 属性限制可以选择的最大最小值。

vue
<template>
  <doc-title>值的范围：[-50, 50]</doc-title>
  <sar-slider :model-value="0" show-value :min="-50" :max="50" />

  <doc-title>值的范围：[-50, 50]</doc-title>
  <sar-slider :model-value="[0, 20]" show-value range :min="-50" :max="50" />
</template>

垂直 ​

使用 vertical 属性垂直展示滑块。

vue
<template>
  <view style="display: flex; flex-direction: row">
    <view>
      <doc-title>单值选择</doc-title>
      <sar-slider :model-value="50" vertical show-value />
    </view>

    <view style="margin-left: 100rpx">
      <doc-title>范围选择</doc-title>
      <sar-slider range :model-value="[20, 80]" vertical show-value />
    </view>
  </view>
</template>

步长 ​

使用 step 属性限制只能选择指定数字的倍数的值。

vue
<template>
  <doc-title>步长：10</doc-title>
  <sar-slider :model-value="50" show-value :step="10" />

  <doc-title>步长：12.3</doc-title>
  <sar-slider range :model-value="[50, 80]" show-value :step="12.3" />
</template>

显示刻度 ​

设置 show-scale 属性可以显示步长对应的刻度，设置 scale-position 属性可以让刻度显示在各个方位。

vue
<template>
  <doc-title>单滑块</doc-title>
  <sar-slider :model-value="40" show-scale :step="20" />

  <doc-title>双滑块</doc-title>
  <sar-slider range :model-value="[20, 80]" show-scale :step="20" />

  <doc-title>刻度显示在上面</doc-title>
  <sar-slider :model-value="40" show-scale scale-position="top" :step="20" />

  <doc-title>垂直刻度</doc-title>
  <view style="display: flex; flex-direction: row">
    <view>
      <doc-title>单滑块</doc-title>
      <sar-slider :model-value="25" vertical show-scale :step="25" />
    </view>

    <view style="margin-left: 100rpx">
      <doc-title>双滑块</doc-title>
      <sar-slider
        range
        :model-value="[25, 75]"
        vertical
        show-scale
        :step="25"
      />
    </view>

    <view style="margin-left: 100rpx">
      <doc-title>刻度显示在右边</doc-title>
      <sar-slider
        :model-value="25"
        vertical
        show-scale
        scale-position="right"
        :step="25"
      />
    </view>
  </view>
</template>

自定义颜色 ​

使用 track-color 属性设置轨道颜色；使用 piece-color 属性设置选中片段的颜色；使用 thumb-color 属性设置按钮的颜色。

vue
<template>
  <doc-title>单值选择</doc-title>
  <sar-slider
    :model-value="50"
    piece-color="var(--sar-orange)"
    thumb-color="var(--sar-orange)"
  />

  <doc-title>范围选择</doc-title>
  <sar-slider
    range
    :model-value="[20, 80]"
    piece-color="var(--sar-orange)"
    thumb-color="var(--sar-orange)"
  />
</template>

自定义尺寸 ​

使用 track-size 属性设置轨道尺寸；使用 thumb-size 属性设置滑块的尺寸。

vue
<template>
  <doc-title>单值选择</doc-title>
  <sar-slider :model-value="50" thumb-size="48rpx" track-size="20rpx" />

  <doc-title>范围选择</doc-title>
  <sar-slider
    range
    :model-value="[20, 80]"
    thumb-size="48rpx"
    track-size="20rpx"
  />
</template>

只读和禁用 ​

只读和禁用状态下无法操作。

vue
<template>
  <doc-title>只读</doc-title>
  <sar-slider :model-value="50" readonly />

  <doc-title>禁用</doc-title>
  <sar-slider :model-value="50" disabled />
</template>

自定义滑块插槽 ​

滑块插槽可以用于自定义滑块样式。

vue
<template>
  <doc-title>单值选择</doc-title>
  <sar-slider :model-value="50">
    <template #end-thumb="{ value }">
      <view class="slider-thumb">{{ value }}</view>
    </template>
  </sar-slider>

  <doc-title>范围选择</doc-title>
  <sar-slider range :model-value="[20, 80]">
    <template #start-thumb="{ value }">
      <view class="slider-thumb">{{ value }}</view>
    </template>
    <template #end-thumb="{ value }">
      <view class="slider-thumb">{{ value }}</view>
    </template>
  </sar-slider>
</template>

<style lang="scss" scoped>
.slider-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 48rpx;
  border-radius: var(--sar-rounded-sm);
  font-size: var(--sar-text-base);
  color: #fff;
  background-color: var(--sar-orange);
  box-shadow: var(--sar-shadow);
}
</style>

API ​

SliderProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
range双滑块模式booleanfalse
model-value滑块值number | number[]-
min最小值number0
max最大值number100
step步长number1
vertical垂直方向滑块booleanfalse
disabled禁用状态booleanfalse
readonly只读状态booleanfalse
piece-color滑块间的轨道颜色string-
track-color滑块轨道颜色string-
track-size滑块轨道尺寸string-
thumb-color滑块颜色string-
thumb-size滑块尺寸string-
show-value是否显示值booleanfalse
value-position值显示的位置'top' | 'right' | 'bottom' | 'left''top' / 'right'
value-background设置值的背景色string-
value-color设置值的字体颜色string-
show-scale是否显示刻度booleanfalse
scale-position刻度显示的位置'top' | 'right' | 'bottom' | 'left''bottom' / 'left'
validate-event是否触发表单验证booleantrue

SliderSlots ​

插槽描述属性
start-thumb自定义起始滑块内容{ value: number }
end-thumb自定义结束滑块内容{ value: number }

SliderEmits ​

事件描述类型
update:model-value滑块值实时改变时触发(value: number | number[]) => void
input 1.9.2+滑块值实时改变时触发(value: number | number[]) => void
change滑块点击或拖动结束且值改变时触发(value: number | number[]) => void
drag-start开始拖动时触发(event: TouchEvent) => void
drag-end结束拖动时触发(event: TouchEvent) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-slider-vertical-height: 300rpx;
  --sar-slider-padding: calc(var(--sar-slider-thumb-size) / 2);

  --sar-slider-show-scale-padding-x: 68rpx;
  --sar-slider-show-scale-padding-y: 52rpx;

  --sar-slider-track-main-axis-size: 100%;
  --sar-slider-track-cross-axis-size: 8rpx;
  --sar-slider-track-bg: var(--sar-secondary-bg);

  --sar-slider-piece-bg: var(--sar-primary);

  --sar-slider-thumb-size: 48rpx;
  --sar-slider-thumb-bg: var(--sar-white);
  --sar-slider-thumb-box-shadow: var(--sar-shadow);

  --sar-slider-value-padding: 8rpx;
  --sar-slider-value-min-width: 40rpx;
  --sar-slider-value-horizontal-min-width: 56rpx;
  --sar-slider-value-font-size: var(--sar-text-sm);
  --sar-slider-value-color: var(--sar-white);
  --sar-slider-value-bg: var(--sar-gray-800);
  --sar-slider-value-box-shadow: var(--sar-shadow);
  --sar-slider-value-arrow-size: 12rpx;

  --sar-slider-scale-size: 16rpx;
  --sar-slider-scale-text-font-size: var(--sar-text-sm);
  --sar-slider-scale-text-offset: 40rpx;
}

CSS 变量 - 暗黑模式 ​

scss
@include theme-dark {
  --sar-slider-value-bg: var(--sar-gray-700);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao