edge-components

Range Step 

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

    <div class="w-full flex justify-between text-xs px-2">
        <span>|</span>
        <span>|</span>
        <span>|</span>
        <span>|</span>
        <span>|</span>
    </div>
</div>
 
<div>
  @!jrmc.form.range({ min: 0, max: 100, value: 20, step: 25, class: 'range-primary' })
  <div class="w-full flex justify-between text-xs px-2">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
</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