Range

A themed slider for picking a value across a range.

On its own, range is just the slider control, themed to match the other inputs.

<c-ui.range name="volume" value="40" />

{% cotton ui.range name="volume" value="40" /%}

Showing the Value

Add show_value to display the current value. Position it beside the slider with value_position="right" (default) or under it with value_position="below".

<c-ui.range name="brightness" value="60" show_value />

<c-ui.range name="contrast" value="25" show_value value_position="below" />

{% cotton ui.range name="brightness" value="60" show_value /%}

{% cotton ui.range name="contrast" value="25" show_value value_position="below" /%}

Min, Max & Step

Control the range and granularity with min, max and step.

<c-ui.range name="temperature" min="15" max="30" step="1.5" value="21" show_value />

{% cotton ui.range name="temperature" min="15" max="30" step="1.5" value="21" show_value /%}

As a field

Give it any field attribute (label, description, error or badge) and the range wraps itself in a Field, no extra markup.

Export quality

Higher quality means a larger file.

<c-ui.range
    name="quality"
    label="Export quality"
    description="Higher quality means a larger file."
    value="75"
    show_value
/>

{% cotton ui.range
    name="quality"
    label="Export quality"
    description="Higher quality means a larger file."
    value="75"
    show_value
/%}

Disabled

Add :disabled="True" to prevent interaction.

<c-ui.range name="locked" value="50" :disabled="True" show_value />

{% cotton ui.range name="locked" value="50" :disabled="True" show_value /%}

Reference

Props

Name	Description	Type	Options	Default
`name`	Form field name for submission	str	—
`value`	Initial value of the slider	number	—	50
`min`	Minimum value	number	—	0
`max`	Maximum value	number	—	100
`step`	Increment between selectable values	number	—	1
`:show_value`	Display the current value next to the slider	bool	`TrueFalse`	False
`value_position`	Where the value is shown when show_value is set	str	`rightbelow`	right
`:accent`	Use the accent for the completed track and handle. False for neutral grey	bool	`TrueFalse`	True
`:disabled`	Disables the slider and prevents interaction	bool	`TrueFalse`	False
`label`	Label text; wraps the slider in a Field	str	—
`description`	Helper text displayed below the label	str	—
`description_trailing`	Additional helper text displayed after the slider	str	—
`error`	Error message to display	str	—
`badge`	Badge text to display next to the label	str	—
`form`	Django form object for error handling	Form	—

Binding the value

The slider exposes its value via x-modelable, so you can two-way bind it with Alpine using x-model, or read changes with a plain @input listener.