simeydotme / jquery-ui-slider-pips Goto Github PK
View Code? Open in Web Editor NEWPlugin for adding little 'pips' , 'floats' and labels to a slider.
Home Page: http://simeydotme.github.io/jQuery-ui-Slider-Pips/
Plugin for adding little 'pips' , 'floats' and labels to a slider.
Home Page: http://simeydotme.github.io/jQuery-ui-Slider-Pips/
Hi, thanks for great plugin.
But when i'm trying to implement $awesome2 verstion with +100 -100 max/min points. It gives me this:
http://polltool.org/mami___i
Is it possible to achieve with such values something similar to $awesome2 from your demo page?
I'd like to style the floats so that they are always visible. Currently, they are only visible upon hovering. When you click away from the slider, the floats disappear.
In your "5% interval" example in the docs, the floats are always visible. Can you please point me to the CSS style where I can achieve this?
Js Fiddle:
https://jsfiddle.net/shanif/zpm391dq/
Thanks!
I hate to do this to you because in all my testing I just cannot recreate this issue.
In a minimal test, it works just fine with latest versions of pips and jqui: http://jsfiddle.net/m4svjpdn/
On the website here: http://www.newportcaravans.com/search?type=caravans&condition=&price=6000%3B32000&berth=4%3B4&length=14%3B20&submit=
If you look on the left at MTPLM, it says the maximum value is 1995, which is the last step value before it goes over 2000. Why it stops here, I have no idea. No other code I have interferes with this slider so I'm at a loss of what the cause could be. Have you seen anything like this before?
HI,
I am very new in jquery and was trying to make a slider to open a popup with the selected range value.
Created a fiddle here: (Want to open popup when I click or drag the slider range, let say if its 2 then the popup should open and the selected range value update to the popup)
http://jsfiddle.net/impulseinflame/j0bjc94y/34/
Output http://jsfiddle.net/impulseinflame/j0bjc94y/28/
Please Please help!!
Hi,
any idea:
with a simple example page, the slider will not move smooth like in your examples.
I checked code for css3 transitions and jscode but havent found anything.
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="jquery-ui-slider-pips.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui-slider-pips.css">
<div class="slider"></div>
<script>
$(".slider").slider().slider("pips");
</script>
Hi!
My jQuery UI Slider has varying min
and max
fields. They can go from zero to millions, based on user's preference.
Here's the code that configures the vanilla step
parameter`:
var slider_step = 10000;
_([100, 500, 1000, 5000, 10000, 100000, 1000000]).forEach( function(value){
if ((slider_max - slider_min) <= value) {
slider_step = value / 100;
return false;
}
});
$slider.slider({min: slider_min, max: slider_max, step: slider_step});
I. e. the vanilla step
is proportional to the slider's range.
How do i define the Pips step
parameter so that it displays the same (or at least mostly the same) number of pips regardless of the vanilla min
, max
and step
parameters?
I am trying to add custom float labels, but when I make the step value equal to 20, the custom floats don't appear. If I make the step equal to 1, then the custom floats do appear correctly.
https://jsfiddle.net/shanif/5x81Lzjq/
$(function() {
$( "#slider" ).slider({
min: 580,
max: 800,
step: 20,
})
.slider("float", {
labels: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"]
})
.slider("pips")
});
No idea when this was added as an option (more than 2 handles) for the slider, but the floats will not work.
Hello, there is the issue.
For example, the slider10 in http://simeydotme.github.io/jQuery-ui-Slider-Pips/
When push on the slider, both the value of the slider and the value of the pips will change.
But, if only pushed on the pips(in this example,months), the value of pips(months) changed but the value of the slider didn't change althoug the positon of the button which is on the slider had changed.
It would be best if this issue could be fix quickly.
But if not, I want to know how to make the pips can not be pushed.
Based on the below image, if you notice, the label is different from that of the float that is showing up (Label: 30, Float: 3).
The code that I have used to generate this slider is
$('.goal-slider').slider({
rest: 'label',
max: 13,
min: 1,
value: 3
}).slider('pips', {
rest: 'label',
labels: ['10', '20', '30', '40', '50', '75', '100', '125', '150', '175', '200', '250', '300']
}).slider('float');
How can I make the floats to show the same as the labels on the slider.
I am a beginner.
The issue which I have is, I did which jQuery-ui-Slider-Pips homepage written, but there is nothing happened.
Then, I included the js&css which written in http://jqueryui.com/slider/#steps, and the slider without pips appared.
Help me please!
The pip floats don't seem to have the suffix/prefix on their tooltips. even when pips: true
is set on the float's options :/
Got it working but the demo page doesnt show any sliders.
See http://jsfiddle.net/gLeh6rqh/2/ for details.
Documentation bug: just add the fact that this widget expects an empty div, and not, as used in many other "slider enhancements" input element (hidden or 'range'). After changing my 'input' tag to 'div' (not forgetting to close it...) it worked. It took me lots of time to get this to work - not only this issue, but others, some on my end.
Anyhow, adding this to the 'usage' section could be nice. I'll do it in a PR...
From the documentation I can see an example where we can set the value to the slider when initializing it, but is there a way to set the value of the slider, after it has been initialized?
Why there're no documentation for the events, like slidechange ...etc?? It'd be very useful to add
Why are you actually using "jqueryui" instead of "jquery-ui"?
In my project another component (jqueryui-touch-punch) adds jquery-ui, so I end up with 2 jquery UI folders under bower_components.
Check it here
https://github.com/furf/jquery-ui-touch-punch/blob/master/bower.json
bower install jquery-ui-slider-pips --save
bower jquery-ui#~1.11.4 cached git://github.com/components/jqueryui.git#1.11.4
bower jquery-ui#~1.11.4 validate 1.11.4 against git://github.com/components/jqueryui.git#~1.11.4
bower jqueryui#>=1.9.2 cached git://github.com/components/jqueryui.git#1.11.4
bower jqueryui#>=1.9.2 validate 1.11.4 against git://github.com/components/jqueryui.git#>=1.9.2
bower jquery-ui-slider-pips#* cached git://github.com/simeydotme/jQuery-ui-Slider-Pips.git#1.10.3
bower jquery-ui-slider-pips#* validate 1.10.3 against git://github.com/simeydotme/jQuery-ui-Slider-Pips.git#*
bower jqueryui#>=1.9.2 install jqueryui#1.11.4
bower jquery-ui#~1.11.4 install jquery-ui#1.11.4
What was I thinking when I wrote that CSS? ๐
blergh! Need to clean it up. Perhaps re-do it in sass?
Anyone feels like doing it go ahead ๐ I'll get to it sometime this week.
Hey,
I think on plugin homepage there is a typo, meaning:
<link rel="stylesheet" type="text/css" href="js/jquery-ui-slider-pips.min.js">
<!-- <link rel="stylesheet" type="text/css" href="js/jquery-ui-slider-pips.js"> -->
It should be script tag used instead of link.
Cheers and thanks for the plugin :)
When creating the slider i am passing 1 label, however when displayed, that 1 label is displayed twice at the start of the slider and at the end. I only need 1 label to display in this particular case.
Value being passed to label.
["120 EDC" ]
The second label which appears, i cannot click to or slide to, it just keeps the handle on the first label.
Any ideas?
Hi,
Is there any possibility of the slider gesture working with this on mobile devices?
I can click at points in the slider to change the value/position but I can't drag it on Android and IOS.
I was going to have a look at doing this in your plugin, as I found a couple sliders that allow this, they just weren't full of as many features that this one is great for. Wondering if you had any advise before I look at this. :)
Autoprefixer needs to be applied to fix transforms.
A nice feature would be an option to show the current position of the slider as a permanent item as the user changes the slider, perhaps as a pip with a special class so it could be styled separately from the rest.
Need to update documentation branch for v1.4.0
Hi, i have been trying to add range from 0 to 35,000 at multiple of 10,000 but i am not able to get the desired result, and i want my max range (35,000 to be something like 35,000 & Above), how to go about it.
$("#circles-slider")
.slider({
min: 0,
max: 35000,
value: 10000
})
.slider("pips", {
rest: "label"
});
It seems that there are only two options at the moment,
label first/last, or label all.
But I would like to label first, last and mid point.
so maybe giving some control over which pips specifically to be labeled?
But we can target specific pips through css and make them bit taller to indicate mid point or quarter and such... so theres some way to make slider easier to navigate already
cheers
Hello,
I am currently using this slider, and i was wondering if there is a way to send the values via form to another page,
i know that i can insert the values into hidden input fields,
is there any other way?
Thanks in advance,
Fabio Ferreira
On clicking a slider pip label I get multiple (too many) slide events but no slidestop event.
Why I can't use together 'step' and 'labels'? I need in scale from 0 to 100000 and I want have a few labels like "10 th", "30 th".. I can't use 'suffix' becouse it will be looks like "10000 th".
I seeing your work is very useful . I want you develop addition number_format for label + tooltip as: number, decimals, dec_point, thousands_sep
I hope you will agree help me.
thanks.
best regards
I have the slider initialized with the below code:
$('.goal-slider').slider({
rest: 'label',
max: 13,
min: 1,
value: 3
}).slider('pips', {
rest: 'label',
labels: ['10', '20', '30', '40', '50', '75', '100', '125', '150', '175', '200', '250', '300']
}).slider('float');
The problem I am facing is that the slider allows only to step through each pip and does not allow to set the slider between pips. If I wanted to set the value 15
, which is between the pip 10 and 20
. Is there a way to do this? I did see Jquery Slider having an option step
to do this. http://jqueryui.com/slider/#steps . Does this plugin support the same?
When the slider range is set to "min" or "max", label clicking stops working.
Changing line 68 to
if ( slider.options.range == true ) {
fixes the problem.
Any plans to support mobile? This is a great project, unfortunately it doesn't seem to work on any mobile devices.
Would be handy to have this published to npm in addition to bower, since many projects are moving away from bower.
In the latest version of this a class of "ui-slider-pip-selected" gets added to the selected pip. However this doesn't respect the actual selected value of the slider.
I have a slider which has three labels, one, two and three. I'm preventing three from being selected with the following change event on the slider:
change: function (event, ui) {
if (ui.value == 2) {
$(this).slider('value', 1);
return false;
}
}
The problem is that this isn't reflected by the pips plugin, and despite the value "three" not being selected on the slider, pips seems to think it is.
Here is a JSFiddle demo showing this in action: http://jsfiddle.net/oxfqoqhk/
There is a border around the slider handle when focused. In the css code, the following lines are supposed to remove that border, but it doesn't work. I think .ui-slider-float should be changed to .ui-slider.
.ui-slider-float .ui-slider-handle:focus,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label {
outline: none;
}
need to check the ui
value before trying to explicitly call it.
Hi. Here is the description of my problem.
http://stackoverflow.com/questions/26094869/jqueryui-slider-widget-enhancer-jquery-ui-slider-pips-implementation-issue
Have to admit to loving this .. the nicest enhancement to jQuery-UI.. everything working beautifully.. but as the label is utterly important to getting the user to interact with the slider.. the UX is a bit of guesswork until the user hovers over the slider itself to display the label.
guess what i am asking in a really long winded way is how to initialise the label on page-load showing the value?
Hi, really like Pips.
I'm looking at vertical sliders and added the float option.
Is their any way to float left or right on a vertical slider easily, with the pointer in the relevant direction?
Also spotted that the the pips go top to bottom rather than bottom to top.
Cheers
I am able to assign a label to the "first" option but not to the "last"
example:
$(function() {
var $slider2 = $("#slider").slider({ max: 7 , value: 2 });
$slider2.slider("pips",
{last: "label", labels: ["Required"]});
$slider2.slider("float");
});
this works if I put first instead but not when I use last. The last only updates the first again. Is there something that I'm missing? Thanks.
Im not sure if this bug is related to this plugin or its a jQuery UI Slider bug, but when I drag the slider handle and release it on a label, the slider handle doesnt get released and follows my mouse x coordinate until I click on something on the page.
Tested with IE10 and Firefox 31.6.
I've stripped the code down to the following, but for some reason the last label becomes '7.3500000000000005' instead of just 7.35, I can't see why.
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<script src="/js/jquery-ui-slider-pips.min.js"></script>
<link href="/css/jquery-ui-slider-pips.css" type="text/css" rel="stylesheet">
<div id="slider" style="width:50%;"></div>
<script>
$("#slider").slider({ range: true, step: 0.01, values: [ 0.15, 7.35 ] });
$("#slider").slider({ min: 0, max: 7.35 });
$("#slider").slider("pips");
</script>
Not possible to click and slide (Drag) in iPhone
Is there any way to always float the selected value?
When I add prefix/suffix to float, prefix/suffix are displayed outside float because the width of .ui-slider-tip is set to 34px by default. However if I change this to width:auto, the float no longer aligns with the slider handle because the margin-left of .ui-slider-tip is set to -18px.
Is it possible to dynamically calculate the correct position (margin-left) of float from its current width so that it is always displayed at the right position ?
Great plugin, by the way!
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.