Django Range Component

Range renders a styled <input type='range'> slider. Set min, max, and step as attributes; they pass through to the native element. Colour variants follow the daisyUI palette.

Basic Range

Preview

Code

<div class="w-full max-w-xs mx-auto">
  <c-lb.range min="0" max="100" value="40" />
</div>

Color Variants

Preview

Code

<div class="flex flex-col gap-2 w-full max-w-xs mx-auto">
  <c-lb.range variant="primary" min="0" max="100" value="40" />
  <c-lb.range variant="secondary" min="0" max="100" value="50" />
  <c-lb.range variant="accent" min="0" max="100" value="60" />
  <c-lb.range variant="success" min="0" max="100" value="70" />
  <c-lb.range variant="warning" min="0" max="100" value="80" />
  <c-lb.range variant="error" min="0" max="100" value="30" />
</div>

Sizes

Preview

Code

<div class="flex flex-col gap-2 w-full max-w-xs mx-auto">
  <c-lb.range size="xs" min="0" max="100" value="40" />
  <c-lb.range size="sm" min="0" max="100" value="50" />
  <c-lb.range size="md" min="0" max="100" value="60" />
  <c-lb.range size="lg" min="0" max="100" value="70" />
  <c-lb.range size="xl" min="0" max="100" value="80" />
</div>

With Steps

Preview

| | | | |

1 2 3 4 5

Code

<div class="w-full max-w-xs mx-auto">
  <c-lb.range min="0" max="100" value="25" step="25" />
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>

Vertical

Set orientation="vertical" for a vertical slider. Give it a height with a class (e.g. h-48).

Preview

Code

<div class="flex gap-8 h-48 p-4">
  <c-lb.range orientation="vertical" value="40" class="h-full" />
  <c-lb.range orientation="vertical" variant="primary" value="70" class="h-full" />
  <c-lb.range orientation="vertical" variant="success" value="25" class="h-full" />
</div>

API Reference

`c-lb.range`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	-	No	Range color variant
size	xs sm md lg xl	`md`	No	Range size
orientation	horizontal vertical	`horizontal`	No	Slider orientation; vertical needs a height set via class
validate	boolean	`False`	No	Enable validation styling
bind	string	-	No	Signal path to bind this element to. Accepts a string path ("volume") or a SignalField from a Signals schema (schema.fields.volume).