Slider

The BSlider is a better input type=range based on the popular and well maintained nouislider library. As such is has full aria support and is also fully keyboard accessible. It also has a lot of other features such as tooltips and unlimited number of thumbs.

Basic usage

Value:

50

Enabled

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

const value = ref(50)
const isDisabled = ref(false)
</script>

<template>
  <BSlider
    v-model="value"
    min="0"
    max="100"
    :disabled="isDisabled"
  />
  <div class="flex items-baseline justify-between">
    <p class="font-semibold">
      Value:
    </p>
    <pre>{{ value }}</pre>
  </div>
  <div class="flex items-center justify-between">
    <BBtn
      variant="outlined"
      @click="value = 50"
    >
      Reset
    </BBtn>
    <BSwitchGroup>
      <BSwitchLabel class="font-medium mr-2">
        {{ isDisabled ? 'Disabled' : 'Enabled' }}
      </BSwitchLabel>
      <BSwitch v-model="isDisabled">
        Toggle state
      </BSwitch>
    </BSwitchGroup>
  </div>
</template>

Vertical mode

In vertical mode its necessary to set am explicit height on the slider component. This can be done by setting the height in CSS.

Value:

50

Enabled

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

const value = ref(50)
const isDisabled = ref(false)
</script>

<template>
  <BSlider
    v-model="value"
    min="0"
    max="100"
    orientation="vertical"
    class="h-46"
    :disabled="isDisabled"
  />
  <div class="flex items-baseline justify-between">
    <p class="font-semibold">
      Value:
    </p>
    <pre>{{ value }}</pre>
  </div>
  <div class="flex items-center justify-between">
    <BBtn
      variant="outlined"
      @click="value = 50"
    >
      Reset
    </BBtn>
    <BSwitchGroup>
      <BSwitchLabel class="font-medium mr-2">
        {{ isDisabled ? 'Disabled' : 'Enabled' }}
      </BSwitchLabel>
      <BSwitch v-model="isDisabled">
        Toggle state
      </BSwitch>
    </BSwitchGroup>
  </div>
</template>