SusRangeSlider

Dual-thumb slider — select a min/max range inside bounds.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Value`	`Prop<float[]>`	`new float[] { 0f, 100f }`	v-model
`Min`	`Prop<float>`	`0f`	v-model
`Max`	`Prop<float>`	`100f`	v-model
`Step`	`Prop<float>`	`1f`	v-model
`Color`	`Prop<string>`	`"primary"`	v-model
`Disabled`	`Prop<bool>`	`false`	v-model
`Readonly`	`Prop<bool>`	`false`	v-model
`ShowLabel`	`Prop<bool>`	`false`	v-model
`ShowTicks`	`Prop<bool>`	`false`	v-model
`TickLabels`	`Prop<string>`	`""`	v-model
`ThumbLabel`	`Prop<string>`	`"hidden"`	v-model
`Error`	`Prop<string>`	`""`	v-model
`MinLabelText`	`Prop<string>`	`"0"`	v-model
`MaxLabelText`	`Prop<string>`	`"100"`	v-model

Slots

No slots.

Events

Name	Field	Payload
`ValueChanged`	`OnValueChanged`	`float[]`
`DragStart`	`OnDragStart`	—
`DragEnd`	`OnDragEnd`	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

keyboard-focus
sus-range-slider
sus-range-slider__fill
sus-range-slider__thumb
sus-range-slider__thumb-dot
sus-range-slider__thumb-label
sus-range-slider__thumb-ripple
sus-range-slider__thumb-ripple--active
sus-range-slider__thumb-tooltip
sus-range-slider__thumb-tooltip-arrow
sus-range-slider__tick
sus-range-slider__tick-label
sus-range-slider__ticks
sus-range-slider__track
sus-range-slider--danger
sus-range-slider--disabled
sus-range-slider--dragging
sus-range-slider--error
sus-range-slider--has-thumb-label
sus-range-slider--primary
sus-range-slider--readonly
sus-range-slider--secondary
sus-range-slider--success
sus-range-slider--warning

Usage

xml

<template>
  <sus:SusRangeSlider :Value="LevelRange.Value"
                      Min="1"
                      Max="100"
                      Step="1"
                      Color="primary"
                      ShowLabel="true"
                      @value-changed="OnRange" />
</template>

<script>
public Prop<float[]> LevelRange = new(new float[] { 10f, 40f });
void OnRange(float[] range) { /* range[0], range[1] */ }
</script>

csharp

var range = new SusRangeSlider();
range.Min.Value = 0f;
range.Max.Value = 100f;
range.Value.Value = new float[] { 25f, 75f };
range.ThumbLabel.Value = "always";
range.OnValueChanged += values => { /* … */ };

Notes

Value is always a two-element float[] (low, high).
ThumbLabel: hidden · hover · always.

SusRangeSlider ​