Slider

<oblyx-slider> renders a real <input type="range">, styled through the standard track/thumb pseudo-elements. Keyboard support (arrow keys move by step, landing on min/max at the ends), pointer dragging, touch, and form participation all come from the native control. Oblyx only styles it and renders the label, help, error and value-readout scaffolding shared with every other Oblyx form control. There is deliberately no wrapper field element:label, help and error are plain attributes on the control.

Basic slider

HTML

Kotlin

<oblyx-slider label="Volume" value="40"></oblyx-slider>

oblyxSlider(label = "Volume", value = 40)

Value label

has-value-label shows the current value as text next to the label, updated live as the slider is dragged or keyed, the same idea as progress bar's own has-value-label.

With a value label

HTML

Kotlin

<oblyx-slider label="Brightness" value="65" has-value-label></oblyx-slider>

oblyxSlider(label = "Brightness", value = 65, hasValueLabel = true)

Min, max and step

min defaults to 0, max to 100, and step to 1. Set any of them for a different range or increment.

Custom range

HTML

Kotlin

<oblyx-slider label="Temperature" min="60" max="80" step="1" value="72" has-value-label></oblyx-slider>

oblyxSlider(label = "Temperature", min = 60, max = 80, step = 1, value = 72, hasValueLabel = true)

Sizes

Slider sizes

HTML

Kotlin

<oblyx-slider label="Small" size="sm" value="30" has-value-label></oblyx-slider>
<oblyx-slider label="Medium" size="md" value="30" has-value-label></oblyx-slider>
<oblyx-slider label="Large" size="lg" value="30" has-value-label></oblyx-slider>

oblyxSlider(label = "Small", size = OblyxElementSize.SM, value = 30, hasValueLabel = true)
oblyxSlider(label = "Medium", size = OblyxElementSize.MD, value = 30, hasValueLabel = true)
oblyxSlider(label = "Large", size = OblyxElementSize.LG, value = 30, hasValueLabel = true)

Disabled

Disabled slider

HTML

Kotlin

<oblyx-slider label="Locked while your plan is downgrading" value="20" disabled has-value-label></oblyx-slider>

oblyxSlider(label = "Locked while your plan is downgrading", value = 20, disabled = true, hasValueLabel = true)

Error

Setting error sets aria-invalid="true" on the native input; non-empty text is also rendered below the control. This is purely informational and does not call setCustomValidity.

Slider with error

HTML

Kotlin

<oblyx-slider label="Team size" min="1" max="10" value="1" has-value-label error="Select at least 2 people."></oblyx-slider>

oblyxSlider(label = "Team size", min = 1, max = 10, value = 1, hasValueLabel = true, error = "Select at least 2 people.")

Form submission

name is what makes the value appear in FormData. Unlike required on most controls, a range input's value can never be "missing": the browser always gives it one. So required is forwarded to the native input for attribute-shape consistency with sibling controls, but has no native validation effect.

Slider inside a form

Drag it and submit to see the value in FormData.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'volume = ' + data.get('volume');">
  <oblyx-slider label="Volume" name="volume" value="50" has-value-label></oblyx-slider>
  <button type="submit">Save</button>
  <output></output>
</form>

form {
  oblyxSlider(label = "Volume", name = "volume", value = 50, hasValueLabel = true)
  button(type = ButtonType.submit) { +"Save" }
}

Reference

`<oblyx-slider>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered and always associated with the slider via a real `<label for>`. Required for an accessible name; omitting it is a defect and is flagged loudly rather than silently producing an unlabeled control.
`help`	`string \| undefined`	–	Help text, rendered between the label row and the control and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone, independent of `error` being non-empty text, sets `aria-invalid="true"` on the native input. When non-empty, also renders the message wired into `aria-describedby`, matching `oblyx-input`'s error handling. Purely informational: this does not call `setCustomValidity`.
`size`	`smmdlg`	`md`	Track/thumb height.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<input name>`. This is what makes the value appear in FormData/`receiveParameters()`.
`value`	`number \| undefined`	–	Current value, bound as the native input's `value` content attribute. It is kept in sync with the live dragged or keyed value on every `input` event, so a later re-render never snaps the thumb back to a stale position. Omit it to let the browser apply its own default: the midpoint between `min` and `max`.
`min`	`number`	`0`	Minimum value, forwarded verbatim to the native `<input min>`.
`max`	`number`	`100`	Maximum value, forwarded verbatim to the native `<input max>`.
`step`	`number`	`1`	Amount the value moves per arrow-key press or drag increment, forwarded verbatim to the native `<input step>`.
`has-value-label`	`boolean`	`false`	Shows the current value as text next to the label, updated live as the control is dragged or keyed.
`required`	`boolean`	`false`	Forwarded to the native `required` attribute, but has no actual effect: a range input always has a value, so there is nothing for `required` to validate. It is still forwarded so `<oblyx-slider required>` keeps the same attribute shape as sibling form controls.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<input>`.