SusRangeSlider

Dual-thumb слайдер — выбор min/max диапазона внутри границ.

Пакет

SusKit · Атомы (коммерческий)

Открыть в песочнице

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
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

Слоты

Слотов нет.

События

Имя	Поле	Payload
ValueChanged	OnValueChanged	float[]
DragStart	OnDragStart	—
DragEnd	OnDragEnd	—

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• 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

Использование

<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>

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 => { /* … */ };

Заметки

• Value — всегда float[] из двух элементов (low, high).
• ThumbLabel: hidden · hover · always.