soundar24/vue-round-slider

A round slider component for Vue JS, with range slider support. Also it can be any kind of arc slider such as pie shape, half / semi-circle, quarter circle shape sliders.

vue-round-slider's Issues

Cannot set property 'roundSlider' of undefined

Hey,
I'm trying to import this library in my Nuxt project. I simply create a plugin file with following content:

import Vue from 'vue'
import RoundSlider from 'vue-round-slider'
Vue.component('RoundSlider', RoundSlider)

But I get this error:
Cannot set property 'roundSlider' of undefined

Am I doing something wrong here?
Any helps would be appreciated. Thanks in advance

vue version: 2.6.12
nuxt version: 2.14.12
vue-round-slider version: 1.0.1

[Feature] Add support for custom ranges

Hello,

it would be nice to have custom ranges like [1, 3, 9, 15 ...] instead of min & max and a fixed step.

How to display the value inside the knob?

In the 3rd screenshot under "difference appearances" (the green one) there is the value inside of the knob displayed. How could this be achived? Didn't found a solution for that until now

Vue 3 support

It's will be great if a Vue 3 compatible version is provided.

Tried the version 1.0.1 on Vue 3 and got

runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: Cannot read property '_c' of undefined
    at Proxy.__vue_render__ (vue-roundslider.esm.js?a824:406)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1167)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5220)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5173)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5132)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)
    at patch (runtime-core.esm-bundler.js?5c40:4684)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4880)

How to restrict the slider from continuing after one rotation.

How to restrict the slider from continuing after one rotation? Want it to stop at the end of the rotation.

How to set the range color into gradient color ?

Can the whole range be dragged?

It would great if it is possible to drag the whole range in both directions to be able to change the min and max values without changing the "distance" between them.

TooltipFormat With Array v-model

As i saw, tooltip can't be formatted with array values.

I have an array like "arr[0, 24]" (v-model="arr")

i need to format it like "0 am - 12 pm", couldn't achieve this

by the way, in events, options.value should be an object, not a string

HI, When i use " sliderValue: "0,3000", how to use starting point change to top?

HI, When i use " sliderValue: "0,3000", how to use starting point change to top?
please help me , thank u

[Feature] Add flat slider

Hey @soundar24 ,

it's me again :)

another cool thing would be a flat slider.

Currently I am using two sliders on my page, the flat slider is showing on desktop and a round slider is used on mobile, because the space is limited.

If I could just use your slider also as a flat one that would be nice.

v-on:change event not firing.

Hello Thank you for this tool.
change event is not firing.

[Feature] Add Labels around the circle

Hello,

It would be nice to display the labels/values around the cirlce, like in the image below.

Or if you know how I can do it on my page by myself, this would also be cool.

svgMode

Hey Soundar,

thanks for this useful Vue component.

Since vue-round-slider is a wrapper for RoundSlider, is it possible to integrate svgMode in vue-round-slider?

Amos