滑块

v-slider组件是数字输入的更好的可视化，它用于收集数字用户数据。

用例

滑块沿着条形图反映一系列值，用户可以从中选择单个值。 它们是调整设置的理想选择，例如音量，亮度或应用图像滤镜。

Sliders（滑块） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Sliders（滑块） - 图2

实战场

template script

  1. <template>
  2.   <v-row
  4.     justify="space-around"
  5.   >
  6.     <v-col cols="12">
  7.       <v-slider
  8.         v-model="min"
  9.         min="-100"
  10.         max="100"
  11.         label="Min"
  12.       ></v-slider>
  13.     </v-col>
  14.     <v-col cols="12">
  15.       <v-slider
  16.         v-model="max"
  17.         min="-100"
  18.         max="100"
  19.         label="Max"
  20.       ></v-slider>
  21.     </v-col>
  22.     <v-switch v-model="disabled" class="ma-2" label="Disabled"></v-switch>
  23.     <v-switch v-model="readonly" class="ma-2" label="Readonly"></v-switch>
  24.     <v-switch v-model="vertical" class="ma-2" label="Vertical"></v-switch>
  25.     <v-switch v-model="range" class="ma-2" label="Range"></v-switch>
  26.     <v-col cols="12">
  27.       <v-slider
  28.         v-if="!range"
  29.         v-model="volume"
  30.         append-icon="volume_up"
  31.         prepend-icon="volume_down"
  32.         :min="min"
  33.         :max="max"
  34.         :disabled="disabled"
  35.         :readonly="readonly"
  36.         :vertical="vertical"
  37.         label="Volume"
  38.       ></v-slider>
  39.       <v-range-slider
  40.         v-else
  41.         append-icon="volume_up"
  42.         prepend-icon="volume_down"
  43.         :min="min"
  44.         :max="max"
  45.         :disabled="disabled"
  46.         :readonly="readonly"
  47.         :vertical="vertical"
  48.         label="Volume"
  49.       ></v-range-slider>
  50.     </v-col>
  51.   </v-row>
  52. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         volume: 10,
  6.         min: 0,
  7.         max: 100,
  8.         disabled: false,
  9.         readonly: false,
  10.         vertical: false,
  11.         range: false,
  12.       }
  13.     },
  14.   }
  15. </script>

Sliders（滑块） - 图3

示例

下面是一些简单到复杂的例子。

最小值和最大值

您可以设置滑块的 min 和 max 值。

template script

  1. <template>
  2.   <v-card flat color="transparent">
  3.     <v-subheader>Min and max default slider</v-subheader>
  5.     <v-card-text>
  6.       <v-row>
  7.         <v-col class="pr-4">
  8.           <v-slider
  9.             v-model="slider"
  10.             class="align-center"
  11.             :max="max"
  12.             :min="min"
  13.             hide-details
  14.           >
  15.             <template v-slot:append>
  16.               <v-text-field
  17.                 v-model="slider"
  18.                 class="mt-0 pt-0"
  19.                 hide-details
  20.                 single-line
  21.                 type="number"
  22.                 style="width: 60px"
  23.               ></v-text-field>
  24.             </template>
  25.           </v-slider>
  26.         </v-col>
  27.       </v-row>
  28.     </v-card-text>
  30.     <v-subheader>Min and max range slider</v-subheader>
  32.     <v-card-text>
  33.       <v-row>
  34.         <v-col class="px-4">
  35.           <v-range-slider
  36.             v-model="range"
  37.             :max="max"
  38.             :min="min"
  39.             hide-details
  40.             class="align-center"
  41.           >
  42.             <template v-slot:prepend>
  43.               <v-text-field
  44.                 :value="range[0]"
  45.                 class="mt-0 pt-0"
  46.                 hide-details
  47.                 single-line
  48.                 type="number"
  49.                 style="width: 60px"
  50.                 @change="$set(range, 0, $event)"
  51.               ></v-text-field>
  52.             </template>
  53.             <template v-slot:append>
  54.               <v-text-field
  55.                 :value="range[1]"
  56.                 class="mt-0 pt-0"
  57.                 hide-details
  58.                 single-line
  59.                 type="number"
  60.                 style="width: 60px"
  61.                 @change="$set(range, 1, $event)"
  62.               ></v-text-field>
  63.             </template>
  64.           </v-range-slider>
  65.         </v-col>
  66.       </v-row>
  67.     </v-card-text>
  68.   </v-card>
  69. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         min: -50,
  6.         max: 90,
  7.         slider: 40,
  8.         range: [-20, 70],
  9.       }
  10.     },
  11.   }
  12. </script>

Sliders（滑块） - 图4

禁用

您无法与 disabled 滑块互动。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-slider
  6.           disabled
  7.           label="Disabled"
  8.           value="30"
  9.         ></v-slider>
  10.       </v-col>
  11.     </v-row>
  12.   </v-container>
  13. </template>

Sliders（滑块） - 图5

只读

您不能与 readonly 滑块交互，但它们看起来与普通滑块一样。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-slider
  6.           readonly
  7.           label="Readonly"
  8.           value="30"
  9.         ></v-slider>
  10.       </v-col>
  11.     </v-row>
  12.   </v-container>
  13. </template>

Sliders（滑块） - 图6

图标

您可以使用 append-icon 和 prepend-icon 属性将图标添加到滑块。

template script

  1. <template>
  2.   <v-card
  3.     flat
  4.     color="transparent"
  5.   >
  6.     <v-subheader>Media volume</v-subheader>
  7.     <v-card-text>
  8.       <v-slider
  9.         v-model="media"
  10.         prepend-icon="volume_up"
  11.       ></v-slider>
  12.     </v-card-text>
  14.     <v-subheader>Alarm volume</v-subheader>
  16.     <v-card-text>
  17.       <v-slider
  18.         v-model="alarm"
  19.         append-icon="alarm"
  20.       ></v-slider>
  21.     </v-card-text>
  23.     <v-subheader>Icon click callback</v-subheader>
  25.     <v-card-text>
  26.       <v-slider
  27.         v-model="zoom"
  28.         append-icon="zoom_in"
  29.         prepend-icon="zoom_out"
  30.         @click:append="zoomIn"
  31.         @click:prepend="zoomOut"
  32.       ></v-slider>
  33.     </v-card-text>
  34.   </v-card>
  35. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         media: 0,
  6.         alarm: 0,
  7.         zoom: 0,
  8.       }
  9.     },
  11.     methods: {
  12.       zoomOut () {
  13.         this.zoom = (this.zoom - 10) || 0
  14.       },
  15.       zoomIn () {
  16.         this.zoom = (this.zoom + 10) || 100
  17.       },
  18.     },
  19.   }
  20. </script>

Sliders（滑块） - 图7

垂直滑块

您可以使用 vertical 将滑块切换到垂直方向。 如果需要更改滑块的高度，请使用 css。

template script

  1. <template>
  2.   <v-container>
  3.     <v-row>
  4.       <v-slider
  5.         v-model="value"
  6.         vertical
  7.         label="Regular"
  8.       ></v-slider>
  9.       <v-range-slider
  10.         v-model="value2"
  11.         vertical
  12.         label="Range"
  13.       ></v-range-slider>
  14.     </v-row>
  15.   </v-container>
  16. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value: 10,
  6.         value2: [20, 40],
  7.       }
  8.     },
  9.   }
  10. </script>

Sliders（滑块） - 图8

拇指

您可以在滑动或总是显示“缩略图标签”。它可以通过设置“缩略图-颜色”和自定义大小，设置“缩略图-大小”来显示自定义颜色。 使用 always-dirty 时，即使在 min 值上，其颜色永远不会改变。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-subheader class="pl-0">Show thumb when using slider</v-subheader>
  6.         <v-slider
  7.           v-model="slider"
  8.           thumb-label
  9.         ></v-slider>
  10.       </v-col>
  12.       <v-col cols="12">
  13.         <v-subheader class="pl-0">Always show thumb label</v-subheader>
  14.         <v-slider
  15.           v-model="slider"
  16.           thumb-label="always"
  17.         ></v-slider>
  18.       </v-col>
  20.       <v-col cols="12">
  21.         <v-subheader class="pl-0">Custom thumb size</v-subheader>
  22.         <v-slider
  23.           v-model="slider"
  24.           :thumb-size="24"
  25.           thumb-label="always"
  26.         ></v-slider>
  27.       </v-col>
  29.       <v-col cols="12">
  30.         <v-subheader class="pl-0">Custom thumb label</v-subheader>
  31.         <v-slider
  32.           v-model="slider"
  33.           :thumb-size="24"
  34.           thumb-label="always"
  35.         >
  36.           <template v-slot:thumb-label="{ value }">
  37.             {{ satisfactionEmojis[Math.min(Math.floor(value / 10), 9)] }}
  38.           </template>
  39.         </v-slider>
  40.       </v-col>
  41.     </v-row>
  42.   </v-container>
  43. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         satisfactionEmojis: ['😭', '😢', '☹️', '🙁', '😐', '🙂', '😊', '😁', '😄', '😍'],
  6.         slider: 45,
  7.       }
  8.     },
  9.   }
  10. </script>

Sliders（滑块） - 图9

反向标签

具有 inverse-label 属性的 v-slider 在其末尾显示标签。

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-slider
  6.           inverse-label
  7.           label="Inverse label"
  8.           value="30"
  9.         ></v-slider>
  10.       </v-col>
  11.     </v-row>
  12.   </v-container>
  13. </template>

Sliders（滑块） - 图10

Light Vuetify Stickers

Stick them to your car, laptop or favorite mug. They are made from a durable vinyl with a laminate that is weather-proof against rain, sun, wind and snow, and even dishwasher safe.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-light-sticker?ref=vuetifyjs.com)

自定义范围滑块

使用 tick-labels 属性和插槽，您可以创建一个非常定制的解决方案。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col class="pa-12">
  4.       <v-range-slider
  5.         :tick-labels="seasons"
  6.         :value="[0, 1]"
  7.         min="0"
  8.         max="3"
  9.         ticks="always"
  10.         tick-size="4"
  11.       >
  12.         <template v-slot:thumb-label="props">
  13.           <v-icon dark>
  14.             {{ season(props.value) }}
  15.           </v-icon>
  16.         </template>
  17.       </v-range-slider>
  18.     </v-col>
  19.   </v-row>
  20. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       seasons: [
  5.         'Winter',
  6.         'Spring',
  7.         'Summer',
  8.         'Fall',
  9.       ],
  10.       icons: [
  11.         'mdi-snowflake',
  12.         'mdi-leaf',
  13.         'mdi-fire',
  14.         'mdi-water',
  15.       ],
  16.     }),
  18.     methods: {
  19.       season (val) {
  20.         return this.icons[val]
  21.       },
  22.     },
  23.   }
  24. </script>

Sliders（滑块） - 图11

刻度线

刻度线代表用户可以将滑块移动到的预定值。

template script

  1. <template>
  2.   <v-card flat color="transparent">
  3.     <v-subheader>Show ticks when using slider</v-subheader>
  5.     <v-card-text>
  6.       <v-slider
  7.         v-model="value"
  8.         step="10"
  9.         ticks
  10.       ></v-slider>
  11.     </v-card-text>
  13.     <v-subheader>Always show ticks</v-subheader>
  15.     <v-card-text>
  16.       <v-slider
  17.         v-model="value"
  18.         step="10"
  19.         ticks="always"
  20.       ></v-slider>
  21.     </v-card-text>
  23.     <v-subheader>Tick size</v-subheader>
  25.     <v-card-text>
  26.       <v-slider
  27.         v-model="value"
  28.         step="10"
  29.         ticks="always"
  30.         tick-size="4"
  31.       ></v-slider>
  32.     </v-card-text>
  34.     <v-subheader>Tick labels</v-subheader>
  36.     <v-card-text>
  37.       <v-slider
  38.         v-model="fruits"
  39.         :tick-labels="ticksLabels"
  40.         :max="3"
  41.         step="1"
  42.         ticks="always"
  43.         tick-size="4"
  44.       ></v-slider>
  45.     </v-card-text>
  46.   </v-card>
  47. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value: 0,
  6.         fruits: 0,
  7.         ticksLabels: [
  8.           'Figs',
  9.           'Lemon',
  10.           'Pear',
  11.           'Apple',
  12.         ],
  13.       }
  14.     },
  15.   }
  16. </script>

Sliders（滑块） - 图12

自定义颜色

您可以使用color、track-color和thumb-color属性来设置滑块的颜色。

template script

  1. <template>
  2.   <div>
  3.     <v-slider
  4.       v-model="ex1.val"
  5.       :color="ex1.color"
  6.       :label="ex1.label"
  7.     ></v-slider>
  9.     <v-slider
  10.       v-model="ex2.val"
  11.       :label="ex2.label"
  12.       :track-color="ex2.color"
  13.     ></v-slider>
  15.     <v-slider
  16.       v-model="ex3.val"
  17.       :label="ex3.label"
  18.       :thumb-color="ex3.color"
  19.       thumb-label="always"
  20.     ></v-slider>
  21.   </div>
  22. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         ex1: { label: 'color', val: 25, color: 'orange darken-3' },
  6.         ex2: { label: 'track-color', val: 75, color: 'green lighten-1' },
  7.         ex3: { label: 'thumb-color', val: 50, color: 'red' },
  8.       }
  9.     },
  10.   }
  11. </script>

Sliders（滑块） - 图13

范围

范围滑块。

template script

  1. <template>
  2.   <v-card flat color="transparent">
  3.     <v-subheader>Default range slider</v-subheader>
  4.     <v-card-text>
  5.       <v-range-slider
  6.         v-model="value1"
  7.       ></v-range-slider>
  8.     </v-card-text>
  10.     <v-subheader>Disabled range slider</v-subheader>
  11.     <v-card-text>
  12.       <v-range-slider
  13.         v-model="value2"
  14.         disabled
  15.       ></v-range-slider>
  16.     </v-card-text>
  17.   </v-card>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value1: [30, 60],
  6.         value2: [30, 60],
  7.       }
  8.     },
  9.   }
  10. </script>

Sliders（滑块） - 图14

验证

Vuetify包含简单的验证通过使用 rules 属性，这个属性接受一个回调函数组，在验证规则时，当前的 v-model 值将被传递给回调函数，这个回调函数必须返回 ture 或 String 或者错误信息。

template script

  1. <template>
  2.   <v-card flat color="transparent">
  3.     <v-subheader>Rules</v-subheader>
  5.     <v-card-text class="pt-0">
  6.       <v-slider
  7.         v-model="value"
  8.         :rules="rules"
  9.         label="How many?"
  10.         step="10"
  11.         thumb-label="always"
  12.         ticks
  13.       ></v-slider>
  14.     </v-card-text>
  16.     <v-subheader>Persistent hint</v-subheader>
  18.     <v-card-text class="pt-0">
  19.       <v-slider
  20.         v-model="value"
  21.         :rules="rules"
  22.         hint="40 in stock"
  23.         label="How many?"
  24.         persistent-hint
  25.         step="10"
  26.         thumb-label="always"
  27.         ticks
  28.       ></v-slider>
  29.     </v-card-text>
  30.   </v-card>
  31. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value: 30,
  6.         rules: [
  7.           v => v <= 40 || 'Only 40 in stock',
  8.         ],
  9.       }
  10.     },
  11.   }
  12. </script>

Sliders（滑块） - 图15

插槽

使用诸如 prepend 和 append 之类的插槽可轻松自定义 v-slider 以适应任何情况。

template script style

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="600"
  5.   >
  6.     <v-toolbar
  7.       flat
  8.       dense
  9.     >
  10.       <v-toolbar-title>
  11.         <span class="subheading">METRONOME</span>
  12.       </v-toolbar-title>
  13.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-share-variant</v-icon>
  16.       </v-btn>
  17.     </v-toolbar>
  19.     <v-card-text>
  20.       <v-row
  21.         class="mb-4"
  22.         justify="space-between"
  23.       >
  24.         <v-col class="text-left">
  25.           <span
  26.             class="display-3 font-weight-light"
  27.             v-text="bpm"
  28.           ></span>
  29.           <span class="subheading font-weight-light mr-1">BPM</span>
  30.           <v-fade-transition>
  31.             <v-avatar
  32.               v-if="isPlaying"
  33.               :color="color"
  34.               :style="{
  35.                 animationDuration: animationDuration
  36.               }"
  37.               class="mb-1 v-avatar--metronome"
  38.               size="12"
  39.             ></v-avatar>
  40.           </v-fade-transition>
  41.         </v-col>
  42.         <v-col class="text-right">
  43.           <v-btn
  44.             :color="color"
  45.             dark
  46.             depressed
  47.             fab
  48.             @click="toggle"
  49.           >
  50.             <v-icon large>
  51.               {{ isPlaying ? 'mdi-pause' : 'mdi-play' }}
  52.             </v-icon>
  53.           </v-btn>
  54.         </v-col>
  55.       </v-row>
  57.       <v-slider
  58.         v-model="bpm"
  59.         :color="color"
  60.         track-color="grey"
  61.         always-dirty
  62.         min="40"
  63.         max="218"
  64.       >
  65.         <template v-slot:prepend>
  66.           <v-icon
  67.             :color="color"
  68.             @click="decrement"
  69.           >
  70.             mdi-minus
  71.           </v-icon>
  72.         </template>
  74.         <template v-slot:append>
  75.           <v-icon
  76.             :color="color"
  77.             @click="increment"
  78.           >
  79.             mdi-plus
  80.           </v-icon>
  81.         </template>
  82.       </v-slider>
  83.     </v-card-text>
  84.   </v-card>
  85. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       bpm: 40,
  5.       interval: null,
  6.       isPlaying: false,
  7.     }),
  9.     computed: {
  10.       color () {
  11.         if (this.bpm < 100) return 'indigo'
  12.         if (this.bpm < 125) return 'teal'
  13.         if (this.bpm < 140) return 'green'
  14.         if (this.bpm < 175) return 'orange'
  15.         return 'red'
  16.       },
  17.       animationDuration () {
  18.         return `${60 / this.bpm}s`
  19.       },
  20.     },
  22.     methods: {
  23.       decrement () {
  24.         this.bpm--
  25.       },
  26.       increment () {
  27.         this.bpm++
  28.       },
  29.       toggle () {
  30.         this.isPlaying = !this.isPlaying
  31.       },
  32.     },
  33.   }
  34. </script>
  1. <style>
  2.   @keyframes metronome-example {
  3.     from {
  4.       transform: scale(.5);
  5.     }
  7.     to {
  8.       transform: scale(1);
  9.     }
  10.   }
  12.   .v-avatar--metronome {
  13.     animation-name: metronome-example;
  14.     animation-iteration-count: infinite;
  15.     animation-direction: alternate;
  16.   }
  17. </style>

Sliders（滑块） - 图16