edge-components

Range Size 

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

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

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

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

</div>
 
<div>
  @!jrmc.form.range({ min: 0, max: 100, value: 40, class: 'range-xs' })
  @!jrmc.form.range({ min: 0, max: 100, value: 40, class: 'range-sm' })
  @!jrmc.form.range({ min: 0, max: 100, value: 40, class: 'range-md' })
  @!jrmc.form.range({ min: 0, max: 100, value: 40, class: 'range-lg' })
</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