<div class="form-control mb-5 w-full max-w-xs">
<label class="label cursor-pointer" for="lastname">
<span class="label-text">
Lastname</span>
</label>
<input type="range" class="range" name="lastname" id="lastname" min="0" max="100" value="40" />
<div class="label"> <span class="label-text-alt text-warning">Help</span>
</div>
</div>
@jrmc.form.control({ name: 'lastname', hint: 'Help', class: 'w-full max-w-xs', label: 'Lastname' })
@!jrmc.form.range({ min: 0, max: 100, value: 40 })
@end
Doc : daisyui range slider
Range slider is used to select a value by sliding a handle.
| Class name | Type | |
|---|---|---|
| range | Component | For input range |
| range-primary | Modifier | Adds primary color to range |
| range-secondary | Modifier | Adds secondary color to range |
| range-accent | Modifier | Adds accent color to range |
| range-lg | Responsive | Large range |
| range-md | Responsive | Medium range(default) |
| range-sm | Responsive | Small range |
| range-xs | Responsive | Extra small range |