Basic



v-model: 50

Multiple values

With labels


v-model: [ 25, 50, 75 ]

Size & colors

Default: color="primary" size="8"

Default

color="secondary" :size="2"

color="third" :size="4"

color="warning" :size="6"

color="danger" :size="10"

color="success" :size="12"

v-model: [ 25, 50, 75 ]

Logarithmic/exponential slider

With min & max values (50, 50000)


v-model: [ 100, 1000, 10000, 40000 ]

No-divider: No differents colors between cursors



v-model: [ 25, 50, 75 ]

No-zoom-animation: Disables cursor animation when active



v-model: [ 25, 50, 75 ]

How to use it ?

  <template>
  <MazSlider
    v-model="slider"
  />
  </div>
</template>

<script>
  import { MazSlider } from 'maz-ui'
  export default {
    components: { MazSlider },
    data () {
      return {
        slider: 50
      }
    }
  }
</script>