jayden-ui

Appearance

On this page

Slider 滑块 ​

基础使用 ​

html
<j-slider></j-slider>

自定义插槽 ​

使用 append 和 prepend 插槽来轻松自定义 j-slider 以便适应任何情况。

Slider
html
<j-slider>
  <template #prepend> Slider </template>
  <template #append>
    <j-icon :icon="'icon-add'"></j-icon>
  </template>
</j-slider>

自定义颜色 ​

通过fillColor（填充）、trackColor（轨道）、thumbColor（滑块）设置slider的颜色

Fill Color

Track Color

Thumb Color

ALL
html
<j-slider :modelValue="25" fillColor="#000">
  <template #prepend> Fill Color </template>
</j-slider>
<j-slider :modelValue="25" trackColor="#333">
  <template #prepend> Track Color </template>
</j-slider>
<j-slider :modelValue="25" thumbColor="#666">
  <template #prepend> Thumb Color </template>
</j-slider>
<j-slider
  :modelValue="20"
  fillColor="#ff9800"
  trackColor="#FFD89E"
  thumbColor="#ff9800"
>
  <template #prepend> ALL </template>
</j-slider>

设置禁用 ​

通过disabled属性设置禁用

html
<j-slider :modelValue="5" disabled></j-slider>

只读 ​

通过readonly属性设置禁用

html
<j-slider :modelValue="5" readonly></j-slider>

绑定 v-model ​

通过v-model 双向数据绑定

50
50
html
<template>
  <j-slider v-model="num">
    <template #append>
      <j-button :icon="'icon-add'" @click="num++"> {{ num }}</j-button>
    </template>
    <template #prepend>
      <j-button :icon="'icon-reduce'" @click="num--"> {{ num }} </j-button>
    </template>
  </j-slider>
</template>

<script setup>
  import { ref } from 'vue';

  const num = ref(50);
</script>

指定最大最小值 ​

通过props min/max 指定最大最小值

-15
-15
html
<j-slider :min="-50" :max="50" v-model="num">
  <template #append>
    <j-button :icon="'icon-add'" @click="num++"> {{ num }}</j-button>
  </template>
  <template #prepend>
    <j-button :icon="'icon-reduce'" @click="num--"> {{ num }} </j-button>
  </template>
</j-slider>

<script setup>
  import { ref } from 'vue';

  const num = ref(50);
</script>

趣味用法 ​

R
R
G
G
B
B

code detail ​

html
<div class="card">
  <div
    class="color-bgc"
    :style="{
    backgroundColor: `rgb(${r}, ${g}, ${b})`
    }"
  ></div>
  <div class="content">
    <j-slider :min="0" :max="255" v-model="r">
      <template #prepend> R </template>
      <template #append>
        <j-input
          size="small"
          style="width: 35px"
          label="R"
          :modelValue="r"
          readonly
        />
      </template>
    </j-slider>
    <j-slider :min="0" :max="255" v-model="g">
      <template #prepend> G </template>
      <template #append>
        <j-input
          size="small"
          style="width: 35px"
          label="G"
          :modelValue="g"
          readonly
        />
      </template>
    </j-slider>
    <j-slider :min="0" :max="255" v-model="b">
      <template #prepend> B </template>
      <template #append>
        <j-input
          size="small"
          style="width: 35px"
          label="B"
          :modelValue="b"
          readonly
        />
      </template>
    </j-slider>
  </div>
</div>
js
import { ref } from 'vue';
const r = ref(155);
const g = ref(155);
const b = ref(155);

源代码 ​

jayden-ui > slider