Sliders

  1. <va-slider
  2.  value-visible
  3.  v-model="value"
  4.  :label-value="`${value3}px`"
  5.  :min="1000"
  6.  :max="2000"
  7. />
  8.  
  9. <va-slider
  10.  range
  11.  pins
  12.  :step="10"
  13.  v-model="value2"
  14. />
  15.  
  16. <div class="va-row d-flex align--center">
  17.  <div class="flex xs1 lg1">
  18.   <div class="form-group">
  19.    <div class="input-group">
  20.     <input id="simple-input2" v-model="value2[0]" required/>
  21.     <label class="control-label" for="simple-input2">
  22.      Slider Label
  23.     </label>
  24.     <va-icon icon="bar"/>
  25.    </div>
  26.   </div>
  27.  </div>
  28.  <div class="flex xs8 lg8 offset--xs1 offset--lg1">
  29.   <va-slider
  30.    v-model="value2"
  31.   />
  32.  </div>
  33.  <div class="flex xs1 lg1 offset--xs1 offset--lg1">
  34.   <div class="form-group">
  35.    <div class="input-group">
  36.     <input id="simple-input3" v-model="value2[1]" required/>
  37.     <label class="control-label" for="simple-input3">
  38.      Slider Label
  39.     </label>
  40.     <va-icon icon="bar"/>
  41.    </div>
  42.   </div>
  43.  </div>
  44. </div>
  1. export default {
  2.   data () {
  3.     return {
  4.       value: 90,
  5.       value2: [20, 60]
  6.     }
  7.   },
  8. }

Props

  • range - Boolean - if set to 'true', slider becomes range.
  • value - Number.
  • label-value - String - overwrite value views. Examples: '40px', '33%', etc.
  • 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 - String. Insert icon from the left side of the slider. Should follow color theme.
  • icon-right - String. Insert icon from the right side of the slider. Should follow color theme.