Git Product home page Git Product logo

roundslider's People

Contributors

aopell avatar dependabot[bot] avatar hanying33 avatar jjrom avatar pvnr0082t avatar soundar24 avatar zay2855 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

roundslider's Issues

Invert range selection for roundSlider (ex: 10 - 5)

Let's say we have a circle from 0 to 11 and sliderType is "range".
Normally I will drag 2 handler to select a range of 2 to 9 for example. Now I need to select a range from 10 to 1 to fulfil the circle. Is it possible to do that?

Issue in setValue function

While pass 0 to the setValue function it doesn't change the value. While use the below code it doesn't work:

obj.setValue(0)

Smooth animation regardless the step

Currently, when we use low max value with step: 1 in settings (like min: 0, max: 4, step: 1), the handle movement when dragged is not smooth, the handle bar "jumps" from 0° to 90°. It would be great if the handle could be dragged smoothly (like if the max was set to 360) and "rounded" to closest value when dropped. Equally, the click on lets say 60° mark would result in rounded value of 1 (90°). I hope you understand what I mean :)

Add npm packaging

Hi,

Could you please add npm packaging of your project?

Kind regards

Stop command with value

Hi

I try to use stop command to fire a function that use slider value but slider value doesn't seem to be passed to the function.

Do you have a way to pass value to stop function ?

roundSlider problem when setting a value programmatically

I have problems setting the value programmatically.

The idea here is that we have a fixed maximum of 10, but depending on some other input values the allowed maximum might only be 8. We are simulating this is a simple function attached to the change even.

The bug can be created by setting moving the handle to 8 twice. The second time no change event is triggered and the handle doesn't snap back.

Here is a demo:
http://codepen.io/rolandschuetz/pen/PZmqwZ?editors=101

Different positions for bar and handle

It would be great when the position of the bar could be set independently from the slider/handle position like in this mock up:
slider

Reason:
Then the bar could show a currently measured value and the handle could display a set point.

Question: using getValue

Hi,

I'm a bit unsure of how to call getValue and was wondering if you could provide an example?

I've tried something similar to what's below, and a few other variations:

var testvalue = $( "#slider" ).getValue();
console.log ( testvalue );

Thanks!

Angular2 drag event not working

I'm trying to implement the roundSlider in an Angular 2 project which is causing me some headache. Please note that I'm a beginner in Angular 2 development.

Configuring and displaying the roundSliders is no problem, but modifying/dragging the value doesn't result in a front-end change.

Here's the current setup in the Angular 2 component:

ngAfterViewChecked() {
jQuery(this._elRef.nativeElement).find('.radial-slider').roundSlider(
{
sliderType: "min-range",
handleShape: "round",
width: "12",
radius: "60",
value: 0,
animation: false,
showTooltip: true,
editableTooltip: false,
readOnly: false,
disabled: false,
keyboardAction: true,
mouseScrollAction: false,
handleSize: "+17",
startAngle: 90,
drag: (event, ui) => {
console.log(event);
}
});

Upon dragging the handle the handle itself doesn't move, but looking in the console log you can see that it does seem to be doing something. Here's an example of the result of the drag event console log:
Object {value: 7, preValue: 0, handle: Object, options: Object, type: "drag"}

What would be the correct way of getting the changed value to actually modify the aria-valuenow and rotate() values so the roundSlider works as expected?

Looking forward to your feedback.

Need a dial mode option

Currently the round slider supports the single dial option only (that means starting 0 degree to 360 degree). Similar. need to provide the multiple dial option. So that any one can drag the handle around the slider multiple times.

Example scenario:
Say you want to choose a specific amount of hours given in minutes, so each lap would consist of 60 minutes. When you want to select 2 hours, you have to spin the wheel 2 times.

This was requested by "thinklabs" on here:
http://roundsliderui.com/#comment-2376271861

Using roundSlider as a clock-picker

Hi,

just want to say that this is a great plugin!

I was thinking of the possibilities of using this as a time-picker and style it sort of like a clock. There are no other circular range-sliders that even try to incorporate this idea, however this one seems to be extensible enough to do this quickly and easily.

Do you have any input in regards to this, or have you done it before?

roundSlider not round on android 4.2.2

Hi,
I'm using roundSlider in a cordova project and for android 4.2.2, the round layout is not round.
Unfortunately this version of android is using android browser so I have no clue what css isn't working.
Here's a screenshot of my roundSlider:
capture d ecran 2016-07-01 a 01 07 52
capture d ecran 2016-07-01 a 01 13 32

Support clicks/dragging inside the circle

I switched from https://github.com/princejwesley/circular-slider to this slider because the circular slider didn't support changing the the sliders value when the mouse went out of the circle. I was happy to see that this intuitive behavior is supported by the roundSlider.

Unfortunately in contrast to circular-slider the roundSlider from this site does not support dragging with the mouse inside the circle. Especially for use on mobile devices you're more or less forced to choose a broad slider bar. I think it would be a clear enhancement without any drawbacks to also support clicking and dragging inside the roundSlider as also https://github.com/princejwesley/circular-slider supports.

Multiple handles support for Slider

Currently the default slider support support single handle only. Here need to provide option to add / remove additional handles with the slider.
[Note: If possible we can consider this for min-range sliders also]

Same requirement from Stack overflow:
http://stackoverflow.com/questions/28408445/jquery-knob-is-it-possible-to-have-a-range/31817074#31817074
Workaround:
http://jsfiddle.net/soundar24/utqgufx0/6/

Some references:
http://vanderlee.github.io/limitslider/

Some known issues and corrections in v1.3

In roundSlider below minor issue and corrections need to be done:

  1. In "beforeCreate" and "create" event we can't get the control instance through the below code : $("#slider").data("roundSlider")
  2. Some core functions are defined internally, need to change as global then only we can access that in sample level also by function overwriting
  3. Need to add the browser name in the root element, to handle some browser specific styles based on the root class

Dynamically apply style to rs-control bar background.

Hi can you show some example about how to style rs-control bar background color. i tried this but it dosen't style full circle, only half of the circle will style, i use same code to add style to the rs-control bg, please follow bellow thread. #31, and appreciate if you can reproduce this simple example.

Get ID from roundSlider that was changed

Hi there,

We have multiple roundSliders on one page. There is a "change" event available, but how can the ID of the roundSlider that was changed from the event arguments provided by this event?

Thanks in advance.

Add sass support

Hi,

Could it be possible to add sass support when you will add #51?

Kind regards.

First Time Init, tooltip littlebit offset

I have a problem, in my code when i initialize roundslider, it's tooltip position littlebit offset, but when i change the value by dragging handle, it reposition correctly. why is that.. i didn't touch css, please find the attachment and the code i use to init my roundslider

$('.per-pp-panel_container .goal_rating').each(function () {
                        var _that = $(this);
                        function tooltipVal2(args) {
                            return args.value + '%';
                        }

                        $(this).roundSlider({
                            value: 60,
                            editableTooltip: false,
                            mouseScrollAction: true,
                            width: 3,
                            handleSize: "+15",
                            sliderType: "min-range",
                            radius: 60,
                            tooltipFormat: tooltipVal2,
                            create: function () {
                                $(this.tooltip).css('color', '#ffffff');
                            },
                            drag: function (args) {
                                console.log(this);
                                $(this.tooltip).css('color', '#ffffff');
                                if (args.value <= 20) {
                                    $(this.innerBlock).css('background-color', '#ff5252');
                                } else if (args.value <= 40) {
                                    $(this.innerBlock).css('background-color', '#ffc107');
                                } else if (args.value <= 60) {
                                    $(this.innerBlock).css('background-color', '#00b4f1');
                                } else if (args.value <= 80) {
                                    $(this.innerBlock).css('background-color', '#2ecc71');
                                }
                            },
                            change: function (args) {
                                // handle the change event here
                            }
                        });
                    });

This is the issue when i first time init

2016-06-13 11_23_10

Use roundSlider as a radial color picker

Need to provide a way to use roundSlider as basic color picker, so that there is no need of any additional plugin.

This requirement can be provided as a add-on plugin.

Support simple horizontal/vertical swipe? Or transparent, wide scroll path?

Would it be possible to support simple horizontal or vertical scroll, rather than having to follow the circle path?

I find following the circle path a bit fiddly on touch-screens. (Actually, more than just a BIT fiddly, really unusably fiddly.) I suppose I could change the width of the arc, but then that will affect the visual appearance, and may look awkward, then.

Alternately, perhaps a wider (but transparent) arc could be used as the scroll target?

An alternative would be for me to display my own linear slider underneath, though I think that will seem strange to the user. And of course I can implement some simple swipe detection on the containing element and achieve linear swipe.

But at that point, I'm just using this to draw an arc. It does have some very nice options for drawing an arc...

Revert range (counterclockwise)

Hello!

First, thanks for your best work! Cool plugin and i don't find another flexible plugin as your!!!!

One question: how can i change roundSlider in revert path, like counterclockwise?

Is it future option?

Decimal Values

I am using this fantastic plugin but I had a question. Is it possible to support decimal values. I am using the range option (-5 to 5) and wanted to use a value of 4.2 or similiar. Is this possible?

Como Sacar el valor del Rango / convertirlo a variable.

Estoy usando el min-range sin ningun problema.

Pero necesito obtener el valor del rango para poder hacer una operacion o formula.

ejemplo: voy a usar el numero del rango como unidad de medida de peso.
10=10kg
para luego hacer lo siguiente.

peso * dosis-maxima / frecuencia.
(10 * 50) / 3.

como puedo sacar ese valor ya sea auna variable o a algun input type=text para yo poder usar ese valor segun mi necesidad.

Prevent the click on the unused angle

Create a slider with startAngle: 0 and endAngle: 320. Now while click the remaining part of the slider (i.e., inbetween the angle 320 - 360) any action shouldn't performed.

Is there a way to detect out of limits values?

Is there a way to detect if the user has set a value grater or lesser than slider's limit. For example, if my limits are 0-100, there's an event where I can say that the value is out of bounds, if the user sets 101?

Set Step

I want to set different step length in different range, like,35~48,step is 1, 48~50, step is 2, 50~60,step is 5.

Alignment issue inside Angular2 directives

We are developing an App with Ionic2 wich is built on top of Angular2

I have the following directive:

@Component({
    selector: "round-slider",
    directives: [IONIC_DIRECTIVES],
    templateUrl: "build/pages/learning/components/round-slider/round.slider.html"
})
export class RoundSlider {
    protected ngAfterViewInit(): void {
        let $slider = (<any>$("#slider"));
        $slider.roundSlider({
            radius: 120,
            width: 12,
            handleSize: "+18",
            handleShape: "dot",
            sliderType: "min-range",
            value: 65
        });
    }
}

This is the final result (value is not centered):

unbenannt

This only happens inside the Angular2 events tho. If I do this inside an ionic2 view event, such as ionViewDidEnter it works fine.

Touch Bug in MS Edge

roundslider on a touchscreen windows 10 device using microsoft edge doenst allow to drag the handle. maybe theres some problem with the touch events handled by edge since its more or less working in ie11 using the same touchscreen device.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.