SaladUI

Slider

Render Slider range input

Read more Read less

Example

<.slider class="w-[60%]" id="slider-single-default-slider" max={50} min={10} step={5} value={20}/>
Default slider Open in playground 
<.form class="w-full" phx-change="validate">
<.slider id="slider-single-default-slider" max={50} min={10} name="scale" value={20} class="w-[60%]"/>
</.form>
Step slider Open in playground 
<.form class="w-full" phx-change="validate">
<.slider id="slider-single-step-slider" max={50} name="amount" value={20} class="w-[60%]" step={5}/>
</.form>
Built in slider Open in playground 
<input type="range" min="10" max="50" value="20" step="5" class="w-[60%]"/>