Custom Horizontal/Vertical/Circular Slider Control For Vue 3

Description:

A customizable slider component for Vue 3 that helps you create responsive, accessible, touch-enabled, horizontal/vertical/circular slider controls on the applications.

How to use it:

1. Import and register the slider component.

import slider from "vue3-slider"
export default {
  components: {
    "vue3-slider": slider
  }
}

2. Add a basic slider control to the app.

<vue3-slider v-model="myNumber" />

3. All possible props to customize the slider control.

width: {
  type: String,
  default: "100%",
  validator: validateLength,
},
height: {
  type: Number,
  default: 6,
},
color: {
  type: String,
  default: "#FB2727",
},
trackColor: {
  type: String,
  default: "#f1f6f828",
},
max: {
  type: Number,
  default: 100,
  required: true,
},
min: {
  type: Number,
  default: 0,
  required: true,
},
step: {
  type: Number,
  default: 1,
  required: true,
  validator(val: number) {
    if (val !== 0) {
      return true;
    } else {
      console.error("[Vue3Slider] Error: Step cannot be 0");
      return false;
    }
  },
},
tooltip: {
  type: Boolean,
  default: false,
},
tooltipText: {
  type: String,
  default: "%v",
  validator(val: string) {
    if (!val.includes("%v")) {
      console.error("[Vue3Slider] Error: tooltip text must contain %v");
      return false;
    }
    return true;
  },
},
tooltipColor: {
  type: String,
  default: "#FFFFFF",
},
tooltipTextColor: {
  type: String,
  default: "#000000",
},
formatTooltip: {
  validator(val: any) {
    if (typeof val !== "function") {
      console.error("[Vue3Slider] Error: formatTooltip must be a function");
      return false;
    } else if (typeof val(0) !== "string") {
      console.error("[Vue3Slider] Error: formatTooltip must return a string");
      return false;
    }
    return true;
  },
},
orientation: {
  type: String,
  default: "horizontal",
  validator(val: string) {
    return val === "horizontal" || val === "vertical" || val === "circular";
  },
},
modelValue: {
  type: Number,
  default: 0,
  required: true,
},
repeat: {
  type: Boolean,
  default: false,
},

Preview:

Vue 3 Slider Horizontal Vue 3 Slider Vertical Vue 3 Slider Circular

Changelog:

v1.6.5 (07/30/2021)

  • fix: resize observer error on dev server reload

v1.6.4 (06/15/2021)

  • Fixed: drag-end fired for all sliders on page

v1.6.3 (06/04/2021)

  • update

v1.6.1 (04/12/2021)

  • update

v1.6.0 (04/11/2021)

  • feat: add flip support for circle slider

v1.5.8 (04/08/2021)

  • fix: modelValueRef not recomputing when modelValue change externally

v1.5.6 (04/06/2021)

  • fix: keyboard controls don’t work after orientation change

v1.5.5 (04/04/2021)

  • add event listeners

Download Details:

Author: freddie-nelson

Live Demo: https://freddie-nelson.github.io/vue3-slider/

Download Link: https://github.com/freddie-nelson/vue3-slider/archive/main.zip

Official Website: https://github.com/freddie-nelson/vue3-slider

Install & Download:

# Yarn
$ yarn add vue3-slider

# NPM
$ npm i vue3-slider

You Might Be Interested In:

Add Comment