• Components
  • Range

Range 

@!jrmc.form.input({ type: 'range', min: 0, max: 100, value: 40 })
@!jrmc.form.range({ min: 0, max: 100, value: 40 })
<input
  type="range"
  class="range"
  
  
  
  max="100"
  value="40"
/>

<input
  type="range"
  class="range"
  
  
  
  max="100"
  value="40"
/>

Range color 

@!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 })
<input
  type="range"
  class="range range-primary"
  
  
  
  max="100"
  value="10"
/>

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

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

Range size 

@!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' })
<input
  type="range"
  class="range range-xs"
  
  
  
  max="100"
  value="40"
/>

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

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

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

Range disabled 

@!jrmc.form.range({ min: 0, max: 100, value: 40, disabled: true })
<input
  type="range"
  class="range"
  
  
  
  max="100" disabled
  value="40"
/>

Range step

| | | | | 
<div>
@!jrmc.form.range({ min: 0, max: 100, value: 25, 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>
<div><input
  type="range"
  class="range range-primary"
  
  
  
  max="100" step="25"
  value="25"
/>

<div class="w-full flex justify-between text-xs px-2">
  <span>|</span>
  <span>|</span>
  <span>|</span>
  <span>|</span>
  <span>|</span>
</div>
</div>

Range control

Help 
@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
<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"
  
  max="100"
  value="40"
/>

<div class="label" >    <span class="label-text-alt text-warning">Help</span>
</div></div>