Rotating the Slider

[juliaramstedt]

Hi, great job! I'm trying to rotate the slider so that it compares to a clock. Would that be possible? If so - Can you point me in the right direction?

Thank you so much for your great work!

[Saymon-biz]

@juliaramstedt please, provide more details regarding your need, or fiddle link

[javierarce]

I think what @juliaramstedt means is how can we place the knob in a different position. Right now is always at the bottom of the circle, but it would be nice to have it at the top, for example.

I've seen there's an undocumented property called startAngleOffset that accepts an angle. If I change it to Math.PI (3.1416…) the knob gets positioned at the top, but then the slider doesn't work.

I haven't been able to reproduce this behaviour using in JSFiddle using the 1.02 version of the library, but this is the code I've used locally:

<template>
    <circle-slider
      v-model="sliderValue"
      :startAngleOffset="3.1416"
    ></circle-slider>
</template>

<script>
  export default {
      data () {
        return {
          sliderValue: 0
        }
      }
  }
</script>

[hatimox]

hello , any update on this issue ? i need to do the same , thanks

[Cookizza]

Any tips on this? Currently I'm fighting the components after rotating the container 180 degrees 😭

[dd-han]

I implement some option call minAngle on my fork

https://github.com/trunk-studio/vue-circle-slider

using my fork and add property min-angle with value Math.PI / 2 * 3 works fine.

but still some bug when set min-angle to other value

Any updates on this issue or still only the workaround? I have a project where I need exact this feature.