A Modern And Customizable Range Slider In Vue.js 3 and TypeScript

Vue 3 slider is horizontal, vertical and circular sliders! Fully responsive, touch screen and keyboard control support!

how to create round slider in html, round slider jquery, circle carousel slider, image slider javascript, half circle slider, javascript range slider, vertical slider in html

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-slider

# NPM
$ npm i vue3-slider

1. Import and register a slider item.

import slider from "vue3-slider"

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

2. Add a basic slider control to the application.

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

3. All possible props to customize 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,
},

Custom Horizontal/Vertical/Circular Slider Control Plugin/Github