W3.CSS Sliders

W3.CSS makes it easy to create sliders with a simple and responsive design. Use the w3-slider class for styling sliders.

Basic Slider Example

<input type="range" class="w3-slider" min="1" max="100" value="50">
    

Customized Slider

You can combine the slider with other W3.CSS classes for enhanced design:

<div class="w3-container">
  <label class="w3-text-blue">Volume</label>
  <input type="range" class="w3-slider w3-border w3-round" min="0" max="100" value="30">
</div>