simeydotme/jquery-ui-slider-pips

Plugin for adding little 'pips' , 'floats' and labels to a slider.

jquery-ui-slider-pips's Issues

Functionality from $awesome2 - but with +100 -100 max/min points.

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?

Permanent display of current handle position

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.

ui-slider-pip-selected doesn't respect slider value

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/

Request: Publish to npm

Would be handy to have this published to npm in addition to bower, since many projects are moving away from bower.

Have the label show on load?

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?

Click on Slider Pip Value Events

On clicking a slider pip label I get multiple (too many) slide events but no slidestop event.

Last label becomes 7.3500000000000005!

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>

Missing documentation words about required empty div tag

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...

Stackoverflow question about implementation issue

Hi. Here is the description of my problem.
http://stackoverflow.com/questions/26094869/jqueryui-slider-widget-enhancer-jquery-ui-slider-pips-implementation-issue

How to make number_format for label + tooltip ?

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

Include section

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 :)

How to dynamically set the value of the slider on button click

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?

Events documentation?

Why there're no documentation for the events, like slidechange ...etc?? It'd be very useful to add

Extra zeroes on pip number

Every label has a leading zero, e. g.: 00, 0100, 0500, 01000...

How do i avoid these?

My Pips call:

$slider.slider({
    min: 0,
    max: 2000,
    step: 50,
    slide: function() { /* ... */ },
    change: function() { /* ... */  }
});
$slider.slider( "pips", { rest: "label", step: 10 } );

Float on vertical slider

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

Sliders with odd-numbers for step is messed up!

Feature request - ability to label specific pips?

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

How to keep the floats always visible?

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!

open popup using the UI slider and update the value of the selected range

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!!

triggering a slidechange event causes error

need to check the ui value before trying to explicitly call it.

labels for first and last

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.

Floats doesn't cater for more than 2 handles

No idea when this was added as an option (more than 2 handles) for the slider, but the floats will not work.

smooth animation on ui slide handle missing

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>

Slider on mobile

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. :)

I do not know how to set up the jQuery-ui-Slider-Pips

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!

dragging a slider handle and releasing the mouse button on a label doesnt stop dragging

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.

Can not slide on IPhone

Not possible to click and slide (Drag) in iPhone

Problem with .ui-slider-tip and prefix/suffix

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!

Maximum value changes on drag

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?

How to show the slider tip always on the right side of slider line?

I want to show the slider tip always on the right side of slider line, not sliding with the ui-slider-handle ( like attached )

How to show floats based on the labels

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.

Always float the selected value?

Is there any way to always float the selected value?

Dependancy name "jqueryui" vs. "jquery-ui"

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

How to submit slider values via Form

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

Increment by configured steps

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?

No Prefix/Suffix on pip floats!?

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 :/

Figuring out the `step` parameter

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?

Use together 'step' and 'labels'

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".

gh-pages autoprefixer

Autoprefixer needs to be applied to fix transforms.

Adding bigger range

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"
    }); 

Clean up src/css

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.

BUG: Range min or max

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.

Update Documentation

Need to update documentation branch for v1.4.0

Passing single label produced 2 labels on slider.

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?

Custom float labels don't appear when step value is greater than 1

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") 
  });

the value of the slider would not change when only pushed the pips

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.

Changing the `max` option of the jquery-ui slider, does not update the the pips

See http://jsfiddle.net/gLeh6rqh/2/ for details.

Border around slider handle

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;
}

Mobile / Touch-friendly?

Any plans to support mobile? This is a great project, unfortunately it doesn't seem to work on any mobile devices.

Demo Page not showing anything in IE8

Got it working but the demo page doesnt show any sliders.