OrbitSlider

A diferencia del resto de Orbit, este componente envuelve un control nativo en vez de construir la interacción desde cero — en Kotlin es un material3.Slider restyleado vía SliderDefaults.colors(), en web es un <input type="range"> real. La parte rellena usa color.primary.500, el track vacío color.field.control-track — mismo par que usa OrbitSwitch para su track.

Precaución

Los navegadores no comparten un estándar para estilar el thumb de un <input type="range"> — Chrome/Safari usan ::-webkit-slider-thumb, Firefox ::-moz-range-thumb. La versión web está ajustada para que se vean lo más parecido posible entre navegadores, pero no hay garantía de que salgan pixel-perfect idénticos. Si notás una diferencia visible, es un problema conocido de esta implementación, no una regresión.

Uso

Web

<orbit-slider value="40" min="0" max="100"></orbit-slider>

Compose Multiplatform

var value by remember { mutableStateOf(40f) }
OrbitSlider(value = value, onValueChange = { value = it }, valueRange = 0f..100f)

Estados

Web

<orbit-slider value="60"></orbit-slider>
<orbit-slider value="60" disabled></orbit-slider>

Compose Multiplatform

OrbitSlider(value = 60f, onValueChange = {})
OrbitSlider(value = 60f, onValueChange = {}, enabled = false)

Props

Prop	Tipo	Default	Descripción
value	Float (Kotlin) / number (web)	—	Valor actual.
onValueChange / evento input	(number) => void	—	Se dispara mientras se arrastra.
valueRange (Kotlin) / attrs min/max (web)	ClosedFloatingPointRange<Float> / number	0f..1f / 0–100	Rango de valores.
steps (Kotlin) / attr step (web)	Int / number	0 / 1	Cantidad de pasos discretos entre el mínimo y el máximo.
enabled / attr disabled	boolean	true	Habilita/deshabilita.