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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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>

Accessibility

Each cursor is a slider with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext when labels are set.

Keyboard: ← / ↓ and → / ↑ move by one step, Page Down / Page Up by ten steps, Home / End to the lowest / highest value allowed for the cursor (a cursor never passes its neighbours).

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model Array of cursors values	number | number[] | null	Yes	-	-
labels	array of cursors label	string[]	No	-	-
min	min value of sliders	number	No	0	-
max	max value of sliders	number	No	100	-
step	step value for slider increments	number	No	1	-
size	height size of slider bar	``${number}rem|${number}px|${number}em|${number}vw|${number}vh|${number}vmin|${number}vmax|${number}%|${number}ch|${number}cm|${number}mm|${number}in|${number}ex|${number}pc|${number...`	No	-	-
divider	remove div in different colors	boolean	No	true	-
log	become a logarithmic slider (exponential)	boolean	No	false	-
color	main slider color	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
cursor-anim	disables cursor animation when active	boolean	No	true	-

Events

Event name	Payload	Description
update:model-value	any[