MazSlider

MazSlider is a standalone component that replaces the standard html input range with a beautiful design system. Many options like multiple cursors and values, colors, sizes and logarithmic/exponential values are available

Basic usage

<script lang="ts" setup>
import MazSlider from 'maz-ui/components/MazSlider'
import { ref } from 'vue'
const sliderValue = ref(50)
</script>

<template>
  <MazSlider v-model="sliderValue" />
</template>

Options

Step

<MazSlider v-model="value" :step="10" class="vp-raw" />

Multiple sliders & labels

<script lang="ts" setup>
import MazSlider from 'maz-ui/components/MazSlider'
import { ref } from 'vue'
const multipleSilders = ref([25, 50, 75])
const multipleSildersLabels = ['Small', 'Middle', 'Big']
</script>

<template>
  <MazSlider v-model="multipleSilders" :labels="multipleSildersLabels" />
</template>

Sizes & colors

<script lang="ts" setup>
import MazSlider from 'maz-ui/components/MazSlider'
import { ref } from 'vue'
const multipleSilders = ref([25, 50, 75])
const multipleSildersLabels = ['Small', 'Middle', 'Big']
</script>

<template>
  <MazSlider
    v-model="multipleSilders"
    :labels="multipleSildersLabels"
    color="secondary"
    size="1.5rem"
  />

  <MazSlider
    v-model="multipleSilders"
    :labels="multipleSildersLabels"
    color="destructive"
    size="1.2rem"
  />

  <MazSlider
    v-model="multipleSilders"
    :labels="multipleSildersLabels"
    color="success"
    size="12px"
  />

  <MazSlider
    v-model="multipleSilders"
    :labels="multipleSildersLabels"
    color="info"
    size="10px"
  />
</template>

Logarithmic/exponential

<script lang="ts" setup>
import MazSlider from 'maz-ui/components/MazSlider'
import { ref } from 'vue'
const logSilders = ref([50, 10000, 30000, 45000])
const logSildersLabels: ['Micro', 'Small', 'Middle', 'Big']
</script>

<template>
  <MazSlider
    v-model="logSilders"
    :labels="logSildersLabels"
    :min="50"
    :max="50000"
    logs
  />
</template>

hide dividers & cursor animation

Each sections between cursors has the same color

Component don't have animation on cursor

<script lang="ts" setup>
import MazSlider from 'maz-ui/components/MazSlider'
import { ref } from 'vue'
const multipleSilders = ref([25, 50, 75])
</script>

<template>
  <MazSlider
    v-model="multipleSilders"
    :divider="false"
    :cursor-anim="false"
  />
</template>

Props

Name	Description	Type	Required
model-value	Array of cursors values	number | Array | undefined | null	Yes
labels	array of cursors label	string[]	No
min	min value of sliders	number	No
max	max value of sliders	number	No
step	step value for slider increments	number	No
size	height size of slider bar	string	No
divider	remove div in different colors	boolean	No
log	become a logarithmic slider (exponential)	boolean	No
color	main slider color	MazColor	No
cursor-anim	disables cursor animation when active	boolean	No

Events

Event name	Properties	Description
update:model-value