edge-components

Range Color 

<div><input type="range" class="range range-primary" min="0" max="100" value="10" />

    <input type="range" class="range range-secondary" min="0" max="100" value="50" />

    <input type="range" class="range range-accent" min="0" max="100" value="100" />

</div>
 
<div>
  @!jrmc.form.range({ class: 'range-primary', min: 0, max: 100, value: 10})
  @!jrmc.form.range({ class: 'range-secondary', min: 0, max: 100, value: 50 })
  @!jrmc.form.range({ class: 'range-accent', min: 0, max: 100, value: 100 })
</div>

Range slider

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