RTL Support: Full

Accessibility: Full

Translations: Not Needed

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

A dual-handle range slider bound to a [start, end] array. The tooltip shows the value with a % suffix by default.

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

Set type="single" to bind a single number instead of a range. This is the common shape for adjusting one setting — opacity, zoom, blur, an angle, and so on. For a compact control inside a panel or toolbar, combine it with :showMinMax="false" and a small size (shown in Compact Control).

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>

Compact Control

A common real-world setup: a single-handle slider used as a compact setting control. Hide the min/max labels, use a small size, and format the tooltip for the unit. Fractional step values (e.g. 0.01) work for fine-grained inputs like opacity, and min can be negative (e.g. line-height offsets). In very tight spots you can drop the tooltip entirely with :tooltip="false", and min/max can be reactive values that you clamp the bound value against when they change.

vue

<template>
  <!-- Blur: 0–100 px -->
  <HLInputSlider
    v-model:value="blur"
    type="single"
    size="xs"
    :min="0"
    :max="100"
    :showMinMax="false"
    :format-tooltip="v => `${v}px`"
  />

  <!-- Opacity: 0–1 with a fractional step, shown as a percentage -->
  <HLInputSlider
    v-model:value="opacity"
    type="single"
    size="xs"
    :min="0"
    :max="1"
    :step="0.01"
    :showMinMax="false"
    :format-tooltip="v => `${Math.round(v * 100)}%`"
  />
</template>

<script setup lang="ts">
import { HLInputSlider } from '@platform-ui/highrise'
import { ref } from 'vue'

const blur = ref(20)
const opacity = ref(0.5)
</script>

With Input Controls

Set showInput to render numeric input fields alongside the slider.

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>

The tooltip appends % by default. Pass formatTooltip to change the unit or format entirely — e.g. show degrees, currency, or the raw number. Return the string you want displayed.

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

Set step to constrain values to fixed increments.

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

Set size to one of lg, md, sm, xs, 2xs, or 3xs to scale the slider.

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

Wrap the slider in HLFormItem and use feedback to show helper text.

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>

With Validation

Inside an HLForm with a model and rules, the slider participates in form validation like any other field. Bind the field with v-model:value, give the HLFormItem a path, and validate the value in the rule — dragging outside the allowed bounds surfaces the error. This example requires the min handle ≥ 30 and the max handle ≤ 90.

vue

<template>
  <HLForm :model="model" :rules="rules">
    <HLFormItem label="Allowed range" path="range">
      <HLInputSlider v-model:value="model.range" type="dual" showInput />
    </HLFormItem>
  </HLForm>
</template>

<script setup lang="ts">
import { HLInputSlider, HLForm, HLFormItem } from '@platform-ui/highrise'
import { reactive } from 'vue'

const model = reactive({ range: [40, 80] })

const rules = {
  range: {
    required: true,
    validator: (_, value) => {
      if (!value) return new Error('Please select a range')
      if (value[0] < 30) return new Error('Minimum value should be at least 30')
      if (value[1] > 90) return new Error('Maximum value should not exceed 90')
      return true
    },
    trigger: ['change', 'blur'],
  },
}
</script>

Disabled State

Set disabled to make the slider non-interactive.

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

Set :showMinMax="false" to hide the min and max value 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>

Event Testing

This example logs the events the slider emits as you interact with it. Try the following:

Drag a handle to test @dragstart and @dragend
Move a handle or edit the input to test @update:value

100

Event Log:

No events logged yet. Try the actions above.

vue

<template>
  <HLInputSlider
    v-model:value="value"
    type="dual"
    showInput
    @update:value="val => addEventLog('@update:value → ' + JSON.stringify(val))"
    @dragstart="addEventLog('@dragstart')"
    @dragend="addEventLog('@dragend')"
  />
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Try the actions above.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">{{ log.timestamp }}: {{ log.event }}</div>
  </div>
</template>

<script setup lang="ts">
import { HLInputSlider } from '@platform-ui/highrise'
import { ref } from 'vue'

const value = ref([50, 80])
const eventLog = ref<{ event: string; timestamp: string }[]>([])
const addEventLog = (event: string) => {
  eventLog.value.unshift({ event, timestamp: new Date().toLocaleTimeString() })
  if (eventLog.value.length > 5) {
    eventLog.value.pop()
  }
}
</script>

Accessibility

Describe the slider using aria-label / aria-labelledby.
Point to helper or error text via aria-describedby.

Imports

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

Props

Name	Type	Default	Description
id	`string`	Auto (`hr-input-slider-*`)	Unique identifier for the slider. Automatically generated when omitted.
value	`number \| number[]`	—	Current value(s). Bind with `v-model:value`. Required — pass an array in `dual` mode and a number in `single` mode (see the note below).
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 the value tooltip is shown while dragging. Always hidden when `disabled` is `true`.
defaultValue	`number \| number[] \| undefined`	`undefined`	Value used before `value` is set (uncontrolled fallback)
disabled	`boolean`	`false`	Whether the slider is disabled
type	`'single' \| 'dual'`	`'dual'`	Single handle (numeric value) or dual handle (range array)
showInput	`boolean`	`false`	Whether to show numeric input fields alongside the slider
showMinMax	`boolean`	`true`	Whether the `min` and `max` labels are shown on either side
size	`'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'`	`'md'`	Size of the slider. Falls back to the surrounding `HLForm` size when omitted.
formatTooltip	`(value: number) => string`	value => `${value}%`	Function that formats the tooltip text. Defaults to appending `%` — pass your own to change or remove the unit.

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.

Input Slider ​

Basic Usage ​

Single Handle Mode ​

Compact Control ​

With Input Controls ​

Custom Tooltip Format ​

Step Control ​

Sizes ​

With Hint Text ​

With Validation ​

Disabled State ​

Without Min/Max Labels ​

Event Testing ​

Accessibility ​

Imports ​

Props ​

Emits ​

Slots ​