soundar24 / roundslider Goto Github PK
View Code? Open in Web Editor NEWroundSlider - A free jQuery plugin
Home Page: https://roundsliderui.com/
License: MIT License
roundSlider - A free jQuery plugin
Home Page: https://roundsliderui.com/
License: MIT License
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?
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)
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 :)
This causes problems when concatenating multiple minified javascript files (as to serve them with one request instead of many) and was particularly annoying to find... This comment helped me a lot: http://stackoverflow.com/a/25412298
Hi,
Could you please add npm packaging of your project?
Kind regards
Currently the "pie" slider having the square type edges. The rounded edge also needed for this case.
This was requested by "James Lanman" on here:
http://roundsliderui.com/#comment-2284596311
Currently the slider change event will trigger when we manually move the handle. While set the value through option or public method at that time change event won't triggered, need to consider at this time also.
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 ?
Currently the "default" slider only supports the transparent background. But for "range" and "min-range" slider also should support the transparent background.
Requested by "Janeth Chavez" and "Καρυοφύλλης Π." on here:
http://roundsliderui.com/#comment-2396327317
http://roundsliderui.com/#comment-2324959673
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
Any perspective of creating a TypeDefinition for RoundSlider?
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!
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.
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
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?
Reported by Pete: http://roundsliderui.com/#comment-2965012238
When provide a large step value (consider step as 20), the handle movement feels hard to drag. Sometimes it is better to provide a smooth dragging and when release the handle it should go to the nearest value.
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.
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/
In roundSlider below minor issue and corrections need to be done:
$("#slider").data("roundSlider")
While the handle reaches the min value, a small white line displayed in the middle of the path.
See the demo: http://jsfiddle.net/soundar24/v42udzp7/5/
While wrap the roundSlider with bootstrap column and using "text-center" class, the slider separator was misaligned. Please see the below demo to reproduce the issue:
http://jsfiddle.net/soundar24/LpuLe9tr/349/
Reported from here: http://roundsliderui.com/#comment-2677722565
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.
Need to provide the option to drag the slider bar (range area) by clicking on it, so while drag the range the complete range value will be modified.
Please find the below reference link for this requirement:
https://refreshless.com/nouislider/behaviour-option/
The requirement was asked from here:
http://roundsliderui.com/#comment-2925113164
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.
I tried using the example provided to add "€" to the tooltip but it doesnt work
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
Now the roundSlider having the possible circle shapes such as pie, half and quarter (which are equals to 3/4, 1/2 and 1/4).
Similarly need to provide the support to render any shapes like 1/3, 1/5 and 1/6 shapes.
This should be provide by inbuilt or through changing the start and end angles.
This requirement was asked from here:
http://roundsliderui.com/#comment-2933156338
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.
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...
Currently the slider value can be changed by drag the handle and click on the slider path. Sometimes we need the option to prevent the value change through the click.
Sometimes when I click somewhere and the animation from one point to another point starts there is a "second" animation as a side effect.
http://screencast.com/t/G3LFrhyTJ
This bug can be reproduced with the playground, tested on Chrome.
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?
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?
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.
Currently the slider support the linear step increment only, in some cases it would be better for non linear increment support.
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 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?
Need an option to show the tick marks and numbers around the slider.
Requested from here: http://roundsliderui.com/#comment-2573754885
In roundSlider while keyboard interaction, the left decrements the value and the right key increments the value. But it should be done vice versa.
Reported here:
http://roundsliderui.com/#comment-2906392541
Current workaround:
http://jsfiddle.net/soundar24/LpuLe9tr/660/
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.
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):
This only happens inside the Angular2 events tho. If I do this inside an ionic2 view event, such as ionViewDidEnter it works fine.
This is an awesome widget, thanks!
Will there be any chance to lose the jquery dependency?
(
http://youmightnotneedjquery.com/
http://youmightnotneedjqueryplugins.com/
)
Currently the slider supports the min 0 to max 180. But while set the min 180 and max 0 it doesn't work. So need to provide this support also.
asked here: http://roundsliderui.com/#comment-2768806329
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.