Slider

KSlider is a draggable horizontal input for selecting a numeric value within a range.

Select a random number in the range from 1 to 10

2

110

<KSlider
  v-model="nodesCount"
  label="Select a random number in the range from 1 to 10"
  :min="1"
/>

NOTE

KSlider is best used in scenarios such as specifying volume or rating satisfaction - where the ranges are generally small and the exact selected value is not important. For scenarios requiring precise input in a large range, use KInput type="number" instead.

Props

v-model

KSlider works with v-model for two-way data binding.

Select a random number in the range from 1 to 10

5

110

<template>
  <KSlider
    v-model="nodesCount"
    label="Select a random number in the range from 1 to 10"
    :min="1"
  />
</template>

<script setup lang="ts">
const nodesCount = ref<number>(5)
</script>

label

String to be used as label. Default value is empty string ('').

In the binary system, which value is used to represent true?

1

01

<KSlider
  label="In the binary system, which value is used to represent true?"
  v-model="binaryTrue"
  :max="1"
/>

min

Minimum value of the range (number). Default value is 0.

max

Minimum value of the range (number). Default value is 10.

step

Step value (number). Default value is 1.

65

404550556065707580859095100

<KSlider
  v-model="sliderValue"
  :max="100"
  :min="40"
  :step="5"
  show-marks
/>

showMarks

Boolean value to control whether or not marks for every step on the range should be shown. Marks for minimum and maximum values are shown at all times.

Defaults to false.

30

05101520253035404550

<KSlider
  show-marks
  v-model="sliderValue"
  :max="50"
  :step="5"
/>

marks

The marks prop is useful for displaying custom labels or marks at specific values. It accepts an array of numbers or an array of objects with label and value properties: { label: string, value: number }.

NOTE

If showMarks prop is true, the values provided through this prop take precedence over default marks generated by KSlider.

Approximate number of API requests (monthly in millions)

6

135710

<KSlider
  :marks="[1, 3, 5, 7, 10]"
  v-model="vModel6"
  label="Approximate number of API requests (monthly in millions)"
  :max="10"
  :min="1"
/>

How likely are you to recommend Kongponents to a friend or colleague?

7

Very unlikelyNeither likely nor unlikelyVery likely

<KSlider
  :marks="[
    {
      label: 'Very unlikely',
      value: 0,
    },
    {
      label: 'Neither likely nor unlikely',
      value: 5,
    },
    {
      label: 'Very likely',
      value: 10,
    },
  ]"
  v-model="userRating"
  label="How likely are you to recommend Kongponents to a friend or colleague?"
  :show-value="false"
/>

WARNING

KSlider does not handle collisions between neighboring marks content. Make sure to allocate enough horizontal room to display your custom text.

showValue

Boolean that controls whether KSlider should display a popover showing the input value on interaction. Defaults to true.

0

010

<KSlider
  :show-value="false"
  v-model="vModel8"
/>

disabled

Boolean to control whether or not the input should be disabled.

2

010

<KSlider
  disabled
  v-model="sliderValue"
/>

labelAttributes

Use the labelAttributes prop to configure the KLabel's props when using the label prop.

Slots

label

Provide slotted content for the slider label. This slot takes precedence over the label prop if both are provided.

Slotted label

4

010

<KSlider v-model="sliderValue">
  <template #label>Slotted <code>label</code></template>
</KSlider>

Events

update:modelValue

Fired on change, returns the new value of the slider.

change

Fired on change, returns the new value of the slider.