Multi Range Slider

Vue Bootstrap 5 Multi Range Slide component

Vue slider is an interactive component that lets the user swiftly slide through possible values spread over a desired range. .

Note: Read the API tab to find all available options and advanced customization

Basic example

Multi-range Slider starts with max 100 and min 0 values. 

<template>
  <MDBMultiRange :thumb="false"></MDBMultiRange>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBMultiRange
    },
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
</script>

Basic example with values

You can show values in the another element in dom

Value:
First:
Second:
 
<template>
  <MDBMultiRange :thumb="false" v-model:firstValue="firstValue" v-model:secondValue="secondValue"></MDBMultiRange>
  <div class="mt-3">
    Value:
    <span class="d-flex flex-column">
      <div>First: {{ firstValue }}</div>
      <div>Second: {{ secondValue }}</div>
    </span>
  </div>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBMultiRange
    },
    setup() {
      const firstValue = ref(0);
      const secondValue = ref(100);

      return {
        firstValue,
        secondValue,
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const firstValue = ref(0);
  const secondValue = ref(100);
</script>

One range

You can set a one range to your slider with oneRange property.

<template>
  <MDBMultiRange :thumb="false" oneRange></MDBMultiRange>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBMultiRange
    },
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
</script>

Start Values

You can change start values to ranges with firstValue and secondValue properties. Or use v-model to get two-way binding.

Value:
<template>
  <MDBMultiRange :thumb="false" v-model:firstValue="first" v-model:secondValue="second" @update:firstValue="handleChange"
    @update:secondValue="handleChange"></MDBMultiRange>
  <div class="mt-3">
    Value:
    <span class="d-flex flex-column">
      <div v-if="active">First: {{ first }}</div>
      <div v-if="active">Second: {{ second }}</div>
    </span>
  </div>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBMultiRange
    },
    setup() {
      const first = ref(40);
      const second = ref(80);
      const active = ref(false);

      const handleChange = () => (active.value = true);

      return {
        first,
        second,
        active,
        handleChange,
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const first = ref(40);
  const second = ref(80);
  const active = ref(false);

  const handleChange = () => (active.value = true);
</script>

Tooltips

You can set tooltip to ranges with thumb property.

undefined
undefined 
<template>
  <MDBMultiRange></MDBMultiRange>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBMultiRange
    },
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
</script>

Step example

You can set a step to the ranges with step attribute.

<template>
  <MDBMultiRange :thumb="false" :step="5"></MDBMultiRange>
</template>
<script>
  import { MDBMultiRange } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBMultiRange
    },
  };
</script>
<script setup lang="ts">
  import { MDBMultiRange } from "mdb-vue-ui-kit";
</script>

Multi Range Slider - API

Import

<script>
  import {
    MDBMultiRange
  } from 'mdb-vue-ui-kit';
</script>

Properties

Property Type Default Description
disabled Boolean false Disables input
id String unique random id Changes input's id
secondId String unique random id Changes second input's id
inputClass String "" Adds input classes
label String "" Changes input label
labelClass String "" Adds input label classes
max Number 100 Sets maximum value
min Number 0 Sets minimum value
step Number 1 Defines range step
tag String "div" Changes input wrapper tag
thumb Boolean true Enables or disables thumb.
thumbClass String "" Adds thumb classes
firstValue Number 0 Changes first input value
secondValue Number 100 Changes second input value
wrapperClass String "" Adds input wrapper classes
oneRange Boolean false Displays only one range

Events

Event Type Description
update:firstValue This event fires when the value of first input has been changed.
update:secondValue This event fires when the value of second input has been changed.
start This event fires when you start sliding thumb.
end This event fires when you stop sliding thumb.
slide This event fires when you use arrows to slide thumb. 
<template>
  <MDBMultiRange @update:firstValue="doSomething"></MDBMultiRange>
</template>

CSS variables

// .multi-range-slider
--#{$prefix}multi-range-sliderhand-focus-box-shadow: #{$form-range-thumb-focus-box-shadow};
--#{$prefix}multi-range-slider-horizontal-height: #{$multi-range-slider-horizontal-height};
--#{$prefix}multi-range-hand-width: #{$form-range-thumb-width};
--#{$prefix}multi-range-hand-height: #{$form-range-thumb-height};
--#{$prefix}multi-range-hand-bg: #{$form-range-thumb-bg};
--#{$prefix}multi-range-hand-border-radius: #{$range-thumb-border-radius};
--#{$prefix}multi-range-hand-box-shadow: #{$form-range-thumb-box-shadow};
--#{$prefix}multi-range-hand-transition: #{$form-range-thumb-transition};
--#{$prefix}multi-range-hand-active-bg: #{$form-range-thumb-active-bg};
--#{$prefix}multi-range-track-bg: #{$form-range-track-bg};
--#{$prefix}multi-range-tooltip-transition: #{$multi-range-tooltip-transition};
--#{$prefix}multi-range-tooltip-border-radius: #{$multi-range-tooltip-border-radius};
--#{$prefix}multi-range-tooltip-transform: #{$multi-range-tooltip-transform};
--#{$prefix}multi-range-tooltip-transform-active: #{$multi-range-tooltip-transform-active};
--#{$prefix}multi-range-tooltip-content-size: #{$multi-range-tooltip-content-size};
--#{$prefix}multi-range-tooltip-content-transform: #{$multi-range-tooltip-content-transform};
--#{$prefix}multi-range-tooltip-content-font-size: #{$multi-range-tooltip-content-font-size};
--#{$prefix}multi-range-tooltip-position-top: #{$multi-range-tooltip-position-top};

SCSS variables

$multi-range-slider-horizontal-height: 0.25rem;
$multi-range-tooltip-transition: top 0.2s, transform 0.2s, border-radius 0.2s;
$multi-range-tooltip-border-radius: 50% 50% 50% 0;
$multi-range-tooltip-position-top: -18px;
$multi-range-tooltip-transform: rotate(-45deg) translate(-5px, -4px) scale(0);
$multi-range-tooltip-transform-active: rotate(-45deg) translate(-5px, -4px) scale(1);
$multi-range-tooltip-content-size: 30px;
$multi-range-tooltip-content-transform: rotate(45deg) translateY(25%);
$multi-range-tooltip-content-font-size: 10px;