Slider

VISPA-UI includes an expertly-crafted 11 varities of Slider components which can make your UI building experience effortless.

NOTE: The support for slider's in only for Firefox browser as of now. We're working hard to bring support for other browsers soon.

Basic Slider

To use the Basic Slider component give the slider class to the input element.

              
                
              
              
<div class="slider__container">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Sized Sliders

Large Slider

To use the Large Slider component give the sl-lg class to the inputs container.

              
                
              
              
<div class="slider__container sl-lg">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Medium Slider

To use the Medium Slider component give the sl-md class to the inputs container.

              
                
              
              
<div class="slider__container sl-md">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Small Slider

To use the Small Slider component give the sl-sm class to the inputs container.

              
                
              
              
<div class="slider__container sl-sm">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Step Slider

To use the Step Slider component give the step attribute to the input element.

              
                
              
              
<div class="slider__container">
  <input type="range" min="1" max="100" step="10" class="slider">
</div>
            
          

Square Slider

To use the Square Slider component give the sl-square class to the inputs container.

              
                
              
              
<div class="slider__container sl-square">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Primary Slider

To use the Primary Slider component give the sl-primary class to the inputs container.

              
                
              
              
<div class="slider__container sl-primary">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Danger Slider

To use the Danger Slider component give the sl-danger class to the inputs container.

              
                
              
              
<div class="slider__container sl-danger">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Success Slider

To use the Success Slider component give the sl-success class to the inputs container.

              
                
              
              
<div class="slider__container sl-success">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Warning Slider

To use the Warning Slider component give the sl-warning class to the inputs container.

              
                
              
              
<div class="slider__container sl-warning">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>
            
          

Dark Slider

To use the Dark Slider component give the sl-dark class to the inputs container.

              
                
              
              
<div class="slider__container sl-dark">
  <input type="range" min="1" max="100" value="50" class="slider">
</div>