---
title: "MazSlider"
description: "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"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-slider"
---

# 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

- Package: `maz-ui`
- Import: `import MazSlider from 'maz-ui/components/MazSlider'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-slider

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<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

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

### Multiple sliders & labels

```vue
<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

```vue
<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

```vue
<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

```vue
<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).

## MazSlider API

`import MazSlider from 'maz-ui/components/MazSlider'`

### Props

- `model-value` (`number | number[] | null`, required, `v-model`): Array of cursors values.
- `labels` (`string[]`): array of cursors label.
- `min` (`number`, default: `0`): min value of sliders.
- `max` (`number`, default: `100`): max value of sliders.
- `step` (`number`, default: `1`): step value for slider increments.
- `size` (`` `${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... ``): height size of slider bar.
- `divider` (`boolean`, default: `true`): remove div in different colors.
- `log` (`boolean`, default: `false`): become a logarithmic slider (exponential).
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): main slider color.
- `cursor-anim` (`boolean`, default: `true`): disables cursor animation when active.

### Events

- `@update:model-value` (payload: `any[`)