Sliders

Sliders

<va-slider
 value-visible
 v-model="value"
 :label-value="`${value3}px`"
 :min="1000"
 :max="2000"
/>

<va-slider
 range
 pins
 :step="10"
 v-model="value2"
/>

<div class="va-row d-flex align--center">
 <div class="flex xs1 lg1">
  <div class="form-group">
   <div class="input-group">
    <input id="simple-input2" v-model="value2[0]" required/>
    <label class="control-label" for="simple-input2">
     Slider Label
    </label>
    <va-icon icon="bar"/>
   </div>
  </div>
 </div>
 <div class="flex xs8 lg8 offset--xs1 offset--lg1">
  <va-slider
   v-model="value2"
  />
 </div>
 <div class="flex xs1 lg1 offset--xs1 offset--lg1">
  <div class="form-group">
   <div class="input-group">
    <input id="simple-input3" v-model="value2[1]" required/>
    <label class="control-label" for="simple-input3">
     Slider Label
    </label>
    <va-icon icon="bar"/>
   </div>
  </div>
 </div>
</div>

Props

• range - Boolean - if set to 'true', slider becomes range.
• value - Number.
• value-visible - Boolean - if set to 'true', value label will always be shown.
• min - Number (default: 0).
• max - Number (default: 100).
• step - Number (default: 1) - specify amount of steps between the beginning and the end of slider.
• color - String (default: 'success') - set color for slider track and slider button. Now supported five possible colors for slider: 'success', 'info', 'warning', 'danger', 'gray'.
• label - String - displays label on the left of slider. Should correspond the slider color.
• invert-label - Boolean - if set to 'true', label goes right.
• disabled - Boolean.
• pins - Boolean - if set to 'true', display markers on slider track appear.
• icon - Object. Insert icon from the left side of the slider. Should follow color theme.
• icon-right - Object. Insert icon from the right side of the slider. Should follow color theme.