Slider

NbSlider is a draggable range input with an optional NbNumberInput companion. It supports single-value and two-handle range modes.

<template>
  <NbSlider v-model="volume" label="Volume" :min="0" :max="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const volume = ref(50)
</script>

Range mode ​

Set :range="true" and bind to a [low, high] array to enable two handles.

<template>
  <NbSlider
    v-model="range"
    label="Price range"
    :min="0"
    :max="1000"
    :step="10"
    :range="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const range = ref<[number, number]>([200, 800])
</script>

Without number input ​

Hide the companion input when screen space is tight or the precise value is not important.

Validation states ​

Props ​

Events ​

Interaction ​

• Click anywhere on the track to jump the nearest handle to that position.
• Drag a handle with mouse or touch.
• Edit the value directly in the NbNumberInput; the handle snaps to the new value.
• Values are always snapped to the nearest step increment.
• The number readout is rounded to the precision implied by step (a step of 0.01 shows two decimals), so an off-grid value passed in from outside, e.g. 0.35433, reads as 0.35 instead of overflowing the field. The handle position still reflects the exact value.
• In range mode, the lower handle cannot cross the upper handle.