slidercomponent Slider

Basic Usage

<template>
  <div>
    <b-slider v-model="value1"></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value2" range></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value3" range disabled></b-slider>
  </div>
</template>

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

const value1 = ref(25)
const value2 = ref([20, 60])
const value3 = ref([30, 40])
</script>

Step and Stops

<template>
  <div>
    <b-slider v-model="value4" :step="10"></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value5" :step="10" show-stops></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value6" :step="10" range></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value7" :step="10" range show-stops></b-slider>
  </div>
</template>

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

const value4 = ref(30)
const value5 = ref(35)
const value6 = ref([20, 40])
const value7 = ref([30, 50])
</script>

input

<template>
  <div>
    <b-slider v-model="value1" show-input></b-slider>
    <div class="p10"></div>
    <b-slider v-model="value2" :format-tooltip="format"></b-slider>
  </div>
</template>

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

const value1 = ref(25)
const value2 = ref(35)

function format(val) {
  return 'Progress: ' + val + '%'
}
</script>

With Marks

0°C

12°C

36°C

88°C

<template>
  <div>
    <b-slider v-model="value1" range :marks="marks"></b-slider>
  </div>
</template>

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

const value1 = ref([15, 65])
const marks = {
  0: '0°C',
  12: '12°C',
  36: '36°C',
  88: {
    style: {
      color: '#ff0000'
    },
    label: h('strong', '88°C')
  }
}
</script>

Props

Parameter	Description	Type	Options	Default
value / v-model	Bound value	number	—	0
min	Minimum value	number	—	0
max	Maximum value	number	—	100
disabled	Disable d	boolean	—	false
step	Step size	number	—	1
show-input	Whether to show input, only effective in non-range mode	boolean	—	false
show-input-controls	Whether to show input control buttons when input is displayed	boolean	—	true
input-size	Input size	string	large / default / small / mini	small
show-stops	Whether to show stops	boolean	—	false
show-tooltip	Whether to show tooltip	boolean	—	true
format-tooltip	Format tooltip message	function(value)	—	—
range	Whether to use range selection	boolean	—	false
vertical	Whether to use vertical mode	boolean	—	false
height	Slider height, required in vertical mode	string	—	—
label	Screen reader label	string	—	—
debounce	Debounce delay on input, in milliseconds, only when show-input is true	number	—	300
tooltip-class	Custom class name for tooltip	string	—	—
marks	Marks, key type must be number and value must be within the closed interval [min, max], each mark can have individual styles	object	—	—

Events

Event Name	Description	Callback Parameters
change	Triggers when value changes (when dragging with mouse, triggers only after releasing the mouse)	Changed value
input	Triggers when data changes (when dragging with mouse, triggers in real time during the drag)	Changed value