jQuery: Creating a circular slider

后端 未结 4 1218
逝去的感伤
逝去的感伤 2021-02-10 06:27

You may have seen JavaScript sliders before:

http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html

What I\'m envisioning is a circular slider. It would c

相关标签:
4条回答
  • 2021-02-10 06:54

    define a center point c current mouse point at m

    in your mouse drag event handler, you'd have

    var dx = m.x-c.x;
    var dy = m.y-c.y;
    
    var scale = radius/Math.sqrt(dx*dx+dy*dy);
    
    slider.x = dx*scale + c.x;
    slider.y = dy*scale + c.y;
    

    radius would be some preset value of the slider,

    0 讨论(0)
  • 2021-02-10 07:04

    I have written a jQuery plugin which supports full/half circle sliders.

    Demo Page & Documentation

    0 讨论(0)
  • 2021-02-10 07:13

    Check the jQuery roundSlider plugin from here http://roundsliderui.com/. This is what you want exactly.

    This roundslider having the similar options like the jQuery ui slider. It support default, min-range and range slider type. Not only the round slider it also supports various circle shapes such as quarter, half and pie circle shapes.

    For more details check the demos and documentation page.

    Please check the demo from jsFiddle.

    Related answers: https://stackoverflow.com/a/31367164/1845801 and https://stackoverflow.com/a/31369265/1845801

    Screenshots:

    jquery circular sliders - different circle shapes

    0 讨论(0)
  • 2021-02-10 07:21

    How about this: http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui

    Some explanations and a demo.

    0 讨论(0)
提交回复
热议问题