SusSlider

Single-thumb value slider — min / max / step with optional ticks and labels.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Value`	`Prop<float>`	`0f`	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

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-slider
sus-slider__fill
sus-slider__thumb
sus-slider__thumb-dot
sus-slider__thumb-label
sus-slider__thumb-ripple
sus-slider__thumb-ripple--active
sus-slider__thumb-tooltip
sus-slider__thumb-tooltip-arrow
sus-slider__tick
sus-slider__tick-label
sus-slider__ticks
sus-slider__track
sus-slider--danger
sus-slider--disabled
sus-slider--dragging
sus-slider--error
sus-slider--has-thumb-label
sus-slider--primary
sus-slider--readonly
sus-slider--secondary
sus-slider--success
sus-slider--warning

Usage

xml

<template>
  <sus:SusSlider :Value="Volume.Value"
                 Min="0"
                 Max="100"
                 Step="1"
                 Color="primary"
                 ShowLabel="true"
                 @value-changed="OnVolume" />
</template>

<script>
public Prop<float> Volume = new(70f);
void OnVolume(float value) { /* … */ }
</script>

csharp

var slider = new SusSlider();
slider.Min.Value = 0f;
slider.Max.Value = 1f;
slider.Step.Value = 0.01f;
slider.Value.Value = 0.5f;
slider.ThumbLabel.Value = "always";
slider.OnValueChanged += value => { /* … */ };

Notes

ThumbLabel: hidden · hover · always.
TickLabels is a comma-separated list when ShowTicks is on.

SusSlider ​