Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Input Slider

A slider input component that allows users to select values within a specific range. Supports both single and dual handle modes. Ideal for filtering, adjusting settings, or any numeric input within defined boundaries.

Basic Usage

0

100

Vue

<template>
  <HLInputSlider v-model:value="value" type="dual" />
</template>

<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Single Handle Mode

0

100

Vue

<template>
  <HLInputSlider v-model:value="singleValue" type="single" />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const singleValue = ref(30)
</script>

With Input Controls

0

100

Vue

<template>
  <HLInputSlider v-model:value="value" type="dual" showInput :min="0" :max="100" />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Custom Tooltip Format

0

100

Vue

<template>
  <HLInputSlider v-model:value="value" type="dual" :format-tooltip="value => `${value}°C`" />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Step Control

0

100

Vue

<template>
  <HLInputSlider v-model:value="stepValue" type="dual" :step="10" showInput :min="0" :max="100" />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const stepValue = ref([20, 60])
</script>

Sizes

0

100

0

100

0

100

0

100

0

100

0

100

Vue

<template>
  <HLInputSlider v-model:value="value" size="lg" showInput />
  <HLInputSlider v-model:value="value" size="md" showInput />
  <HLInputSlider v-model:value="value" size="sm" showInput />
  <HLInputSlider v-model:value="value" size="xs" showInput />
  <HLInputSlider v-model:value="value" size="2xs" showInput />
  <HLInputSlider v-model:value="value" size="3xs" showInput />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

With Hint Text

Range

0

100

Select a range between 0 and 100

Vue

<template>
  <HLForm>
    <HLFormItem label="Range" path="range" feedback="Select a range between 0 and 100">
      <HLInputSlider v-model:value="value" type="dual" showInput />
    </HLFormItem>
  </HLForm>
</template>
<script setup lang="ts">
  import { HLInputSlider, HLForm, HLFormItem } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Disabled State

0

100

Vue

<template>
  <HLInputSlider v-model:value="value" disabled />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Without Min/Max Labels

Vue

<template>
  <HLInputSlider v-model:value="value" type="dual" :showMinMax="false" />
</template>
<script setup lang="ts">
  import { HLInputSlider } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref([50, 80])
</script>

Imports

import { HLInputSlider } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string | undefined	undefined	Unique identifier for the slider
value	number | number[]	[0, 100]	Current value(s) of the slider
min	number	0	Minimum value of the slider
max	number	100	Maximum value of the slider
step	number	1	Step increment value
tooltip	boolean	true	Whether to show the tooltip
defaultValue	number | number[] | undefined	undefined	Default value for the slider
disabled	boolean	false	Whether the slider is disabled
type	'single' | 'dual'	'dual'	Type of slider - single or dual handle
showInput	boolean	false	Whether to show or hide input controls
showMinMax	boolean	true	Whether to show or hide min max values
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of the slider
formatTooltip	(value: number) => string	value => value	Function to format tooltip text

Emits

Name	Parameters	Description
@update:value	(value: number | number[])	Emitted when the slider value changes
@dragstart	(e: MouseEvent)	Emitted when slider drag starts
@dragend	(e: MouseEvent)	Emitted when slider drag ends

Slots

The slider component does not provide any slots.