ghusse / jqrangeslider Goto Github PK

The documentation is too leak. It took to me 2 hours to understand how to get the min and max values.
Please add to the documentation an example on how to use the methods.
After hours i discovered that min() method doesn't work and i found this method .rangeSlider('min').

Is it possible to make labels act like handlers? Dragging a label seems intuitive.

I am using jQEditRange-min.js

Copyright (C) Guillaume Gautreau 2012
Dual licensed under the MIT or GPL Version 2 licenses.

I am getting an error in the following line of code in the jqEditRange slider. It's the only place in the code that refers to

this.cache.parent.offset.left;

Whenever it hits this line it throws an error because this.cache.parent.offset is null at that point.

I modified the line to be:
_getValueForPosition:function(a){this.options.isLeft||(a+=this.cache.width.outer);var left = 0; try{left = a-this.cache.parent.offset.left;}catch(ex){console.log(ex);} return this._constraintValue((left)/this.cache.parent.width*(this.options.bounds.max-this.options.bounds.min)+this.options.bounds.min)}

Hello, and thank you for this excellent solution!

My question is - is there an opportunity to lock / unlock date slider from any date changing (dragging labels, etc.)? I mean, make it read only in some cases and then unlock?

Event 'userValuesChanged' is not triggered after zooming with wheelmouse.

I changed the code on several places to make this happened. The only problem is that I don't understand git. So I place the changes here.

1. method zoomIn

this._privateValues(min, max, true);

2. method _privateValues

        _privateValues: function(min, max, isUserInitiated){
            this._setValues(min, max, isUserInitiated);
            this._position();

            return this._values;
        },

3. method _setValues

        _setValues: function(min, max, isUserInitiated){
            var oldValues = this._values,
                difference = Math.abs(max-min),
                isUserInitiated = isUserInitiated || false;

            this._prepareFiringChanged(isUserInitiated);
        },

Hi,

I use the jqrangeslider and I need the slider
start with the Maximun value and finish with the Minimun value.

How I can do this? Can you help me with that?

thxs, excelent Slider.

Hi there, im seeking help with the functionality of the Date range slider.

1: I am looking to make a Play&Pause functionality. I can do this by putting in a loop to trigger click events on the arrows. However, i do not see what function i must be calling. Could you perhaps specify?

2: A way to plot the Bounds, so that it looks like a ruler. Will show for example:

2011 | | | | | | | | | | | 2012 | | | | | ....
........^
......February

So, can plot that below or above the slider?

Any help will be appreciated.

Hi Guillame,

Is it possible, and if it is how to do it, to fix a value of the range to a certain point, for example block the min value to 0 and allow the user to only move the upper part of the slider?

Thanks!

Is there a method to update the bounds of the slider, in the same way as the min and max values are updated?

Eg. for the date slider:
$(".dateSlider").dateRangeSlider("bounds",{min:new Date(2010,0,1), max:new Date(2012,0,1)});

If not, do you have any hints on how to update the bounds?

If I put the div for the slider inside a hidden container div, and then unhide the container div, the slider seems to have no width.

If I put the div for the slider inside a visible container div, then it works fine, even if i toggle the hiddeness of the containing div.

is this easy to fix?

Thanks,
Sarah

one request here :)

do you have a step option? For example I have a set of price values from 1000 to 500 k. I don't want slider to be 1 step only, it would be better to add a step like 5 k or 10k range..

Do you have this option? If not - are you planning to include it and when?

Thanks again for your plugin!

Hi - Thanks for the great slider. I had one issue. I am trying to set range for my dateRangeSlider, and it is not giving me option for that.

Here is my snippet. Basically, what I am trying to do is : I have a defaultValue which is today and today -7. I want users only to choose between today -14 and today + 7 ( which is add/minus 7 from defaultValue)

Do let me know if this is a bug from my side, or if this has to do with the plugin.

var today = new Date();
var rangeStart = new Date(), rangeEnd = new Date();

var oneweekback = new Date();

rangeStart.setDate(today.getDate() - 14);
rangeEnd.setDate(today.getDate() + 7);

oneweekback.setDate(oneweekback.getDate()-7);

var rangeMaxMS = rangeEnd.getTime() - rangeStart.getTime();

$("#range-element").dateRangeSlider({
range: {max : rangeMaxMS},
bounds: {min:new Date(2012,1,1), max:new Date(2012,12,1) } ,
defaultValues : {min : oneweekback, max : new Date() }
});

thx

i want to set minimum range of slider to one day such that left and right handler is set to the same date.So that after i set 'step' option to one day, i can just drag left or right to get a glance of events on one single date.Its like displaying events on just that day. But setting min value to " days:1 ", shows left pointer on one date and right handler on the next day.Same with step.

I want to move the region between the two handle bars to increment by one or decrement depending on which button the user presses. If they press forward, it would increment both MIN & MAX value and shift the region to the right and vice versa for backward button.

Can you please let me know which function i should call.

thanks

When the slider in inside a

thanks for an amazing range slider. I just have one question regarding resetting the values of the slider.
Is it possible to reset the Slider values to the default values with a link after its been changed?

thanks,
eesha.

On the jqEditSider, When I drag one of the handles, the other handle disappears

This happens in Chrome and IE9 on Windows with "steps" option set. In Firefox and Opera it's fine.

Steps to reproduce:

1. Open demo at http://ghusse.github.com/jQRangeSlider/stable/demo/.
2. Go to "Date values" section.
3. Set Step option to "1 month".
4. Start dragging a label slowly.
5. See the handle jittering.

I'm unable to get the mouse wheel plugin to work in my own code as per your demo. I've included the plugin after jQuery/jQueryUI (1.82) and before your code (jQAllRangeSliders-min.js). I set the option in the constructor to make the mouse work as a scroll affordance. via 'mouseWheel.'

Any ideas? Example here (I hope) http://jsfiddle.net/mxSgv/2/

Thank you.

i'm using the code to initialize the slider after the file is being uploaded:

$("#slider").rangeSlider({
bounds:{min:0,max:songDetailArray[0]},
defaultValues:{min:0,max:30},
range: {min: 0, max: 30},
arrows: false
});

the songDetailArray[0] has the length of the song which i set as the max bound. However when the user uploads another song on the same page (not reloading), i see the songDetailArray[0] variable changing to the length of the new song but the #slider object doesn't re-initialize to reflect the new bounds.

i tried to manually set it as well using $("#slider").rangeSlider("bounds", 0, songDetailArray[0]); but doesn't work.

any hints on how to re-initialize it everytime my user uploads a new file using ajax?

thanks

Any plans or thoughts on adding vertical orientation support?

I love this plugin. Built-in date range and center dragging support is spot on! but I need a vertical bar for one of my use-cases.

Appreciate the thought.

All the best.

cheers,
eric

It would be really nice to have the labels editable, not HTML 5 editable, but rather input text fields without border and transparent background instead of pure text in the jquery ui labels:

keypresses of tab and enter as well as element blurring should apply the new value (after a validation of course!)

This would save me the need and space of two extra input fields (and i wouldn't need my messy code for it anymore g)

My current modifications:

    function displayValues(slider, values){
        var min_int = Math.round(values.min);
        var max_int = Math.round(values.max);
        $("#min1").val(min_int);
        $("#max1").val(max_int);
    }

I need integer values for year range input

        $("#max1").bind('keypress', function(e){
           if ( e.keyCode == 13 ) {
             var input = $("#max1").val();
             var output = input;
             if (input < 1833) {
                output = 1833;
             } else if (input > 2011) {
                output = 2011;
             }

             if (isNumeric(input)) {
                $("#defaultSlider").rangeSlider("max", output);
             }               
           }
        });
    });

function isNumeric(value) {
    return !isNaN(parseInt(value)) && isFinite(value);
}

 <input name="max" id="max1" type="text" size="40" maxlength="4" />
 <input name="min" id="min1" type="text" size="40" maxlength="4" />
 <div id="defaultSlider" class="slider"></div>

How can I obtain the currently set bounds of a slider? As you see above, i test for 1833 and 2011. I can update these values via PHP, but it would be nicer to supply the bounds once and do the rest in JS only.

I want to be able to set min/max values on a dateRangeSlider and adjust the slider initial values to the same min and max. As per the docs, I tried calling the constructor again but this isn't working for me.

Example here: http://jsfiddle.net/mxSgv/23/

Can you tell me what I am doing wrong please?

Hi!
Since I was getting NaN/NaN/NaN errors with internet explorer, I suggest including this function as a way to parse strings to instantiate date objects

function parseISO8601(dateStringInRange) {
  var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
    date = new Date(NaN), month,
    parts = isoExp.exec(dateStringInRange);

if(parts) {
  month = +parts[2];
  date.setFullYear(parts[1], month - 1, parts[3]);
  if(month != date.getMonth() + 1) {
    date.setTime(NaN);
  }
}
return date;
}

Hi,

I'm trying to use jQDateRangeSlider but I keep getting an error "b is undefined", when using the debug version, I get an "ui is undefined" error. However, I'm able to drag the whole bar (without using the handles).

Tested on Firefox and Opera.
Tried with versions jQRangeSlider 4.2 and 4.1.2, with jQuery 1.7.2 and jQuery-UI 1.8.2X

Here are my headers

<link rel="stylesheet" type="text/css" href="js/jQRangeSlider/css/classic.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-ui/themes/base/jquery.ui.all.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />

<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="js/index.js"></script>
    <!--
    <script src="js/jQRangeSlider/jQRangeSliderMouseTouch.js"></script>
    <script src="js/jQRangeSlider/jQRangeSliderDraggable.js"></script>
    <script src="js/jQRangeSlider/jQRangeSliderHandle.js"></script>
    <script src="js/jQRangeSlider/jQRangeSliderBar.js"></script>
    <script src="js/jQRangeSlider/jQRangeSliderLabel.js"></script>
    <script src="js/jQRangeSlider/jQRangeSlider.js"></script>
    <script src="js/jQRangeSlider/jQDateRangeSliderHandle.js"></script>
    <script src="js/jQRangeSlider/jQDateRangeSlider.js"></script>
    -->
<script src="js/jQRangeSlider/jQDateRangeSlider-min.js"></script>

And here's the initialization I use on a <div> element this code is on an external js file

$(document).ready( function() {
  $('#dateSlider').dateRangeSlider({
    valueLabels: "change",
    bounds: { min : new Date(2008, 8-1, 01), max : new Date() },
    step:  { days: 1 },
    defaultValues : { min: new Date(2010, 1-1, 01), max: new Date(2011, 1-1, 01) },
  });
});

Any luck with this, I've tried numerous things, am I missing something? I'm trying to have four sliders on one page, they all display successfully, but on submit, only the last shows in the POST array.

Suggestions to have them all post their own array and if possible how to name that array?

Is it posible make the the range sliders to be restricted by intervals, steps, like months?

When I enter a valid value in the Edit Range slider and hit the 'Enter' button, the control resets completely instead of setting the value. Instead of hitting enter, I have to click outside the box in order for the edit to apply correctly.

With me being somewhat a novice programmer with respect to both jQuery and Asp.net I'm sure I'm just missing something obvious. I appreciate any help.

In the most basic sense is I am using your jqDateRangeSlider plugin. I have starting date and ending date text boxes. I also have the date slider bar. The default date ranges set for both the text boxes and slider are 1/1/2008 and 1/1/2015. I then have a button that when clicked takes the dates from and from a sql query produces my Gridview. When the button is clicked, I want the text box fields and slider bar selected values to keep the date that was choosen when the button was clicked. I have been able to figure out how to have the text boxes keep the dates but the SlideBar is where I am having issues. Maybe I can explain what I am seeing better with an example:

1. I use the slider or set the dates via the textbox (datepicker). Lets say I chose 2/1/2010 & 3/1/2010
2. Click the Button. Things happen -- gridview created.
3. Dates in Text Boxes stay as chosen (2/1/2010 & 3/1/2010
4. Slider Bar now has changed where the left end range is the (2/1/2010) and the right end range is the (3/1/201). If I want to modify the date using the slider again I can't go before or after those new dates. How can I do this the slider ranges stay with default values? I hope I explained that well.

Again, maybe I going about this all wrong or not understanding something, but any guidance would be greatly appreciated.

Thanks Mark

does this plugin work fine for touch screen tablets and smart phones?

v3.0 download lacks jquery core, should be included imo like in earlier packages
demo isn't working out of the box due to this

for some reason, the first folder in the package is "..", causing the zip file to show as empty in explorer
other decompression tools may handle it, e.g. 7zip

The readme states:

Generating minified jQRangeSlider files
Launch min/compile.sh (on Linux or Mac) or min/compile.bat (on Windows).

But there is no bat file.

Thanks!

See #43

The slider yields NaN for all outputs when using jQuery 1.8

In order to achieve global hiding, without making additional jQuery selections.

Is it possible to use this plugin for Weeks, Months and year slider ? if so how do we do it.

How to derive at a widget as described bellow from this plugin.

Scenario is some thing like this. user should be able to slide between dates. And if user switches to Week view date range selector will change to weekrange selector and visa versa. similarly for Months and Years

Hey Master!

I wanted to created my own DateRangeSlider, with an onValuesChanged option, but it didn't want to work the way I wanted to.
Sorry for being a rookie.

So, here is a snippet from my code:

...
        date.dateRangeSlider({
            bounds: { min: new Date(2012, 0, 1), max: new Date() },
            defaultValues: { min: monthBack, max: new Date() },
            onValuesChanged: function () {
                alert('whatever');
                var link = "goHere?whatever=true";
                $.ajax({
                    type: "GET",
                    url: link,
                    cache: false,
                    success: function (data) {
                        $("#targetDiv").html(data);
                    },
                    error: function (req, status, error) {
                        alert('an error occured: ' + error + ' (link: ' + link + ')');
                    }
...

if I write simple this:

...
            onValuesChanged: alert('it works'),
...

then it works, but not with a function.

Did I do something wrong, or the jQDateRange selector has some bug?

Limit the range with a minimum and a maximum value.

For instance, only allow a range larger than 1 week, and/or smaller than 1 month.

Hi!
Very nice project!

Maybe there's a bug with date handling while setting bounds.
I'm working on Chromium, jQuery 1.4.4 and jQuery-ui 1.8.9

Here's my code:

$("#elem").dateRangeSlider({
defaultValues:{min:new Date(2010,9,20), max:new Date(2011,4,25)},
wheelMode: "scroll",
wheelSpeed: 8,
bounds:{min:new Date(2010,0,1), max:new Date(2012,0,1)},
formatter: function(value){
console.log(value)
var month = value.getMonth() + 1;
var day = value.getDate();
return "" + (day < 10 ? "0" + day : day) + "/" + (month < 10 ? "0" + month : month) + "/" + value.getFullYear() ;
},
arrows: false
});

Here's what is logged after page load:
Wed Oct 20 2010 00:00:00 GMT+0200 (CEST)
Wed May 25 2011 00:00:00 GMT+0200 (CEST)
Wed Oct 20 2010 00:00:00 GMT+0200 (CEST)
Wed May 25 2011 00:00:00 GMT+0200 (CEST)

Here what is logged when I click and drag:
Invalid Date

Using jQDateRangeSlider

Can make the labels fade by default within the plugin, but am trying to make them not fade if hovered up, i.e. let's say hovered upon to change the input value of the slider, and then on hover off to fade out like normal.

Any suggestions?

I can't manage to hide the slider labels by hiding the container div. Similarly, the labels mantain their fixed position if I resize the browser window.

Hi

atm it is not possible to set the min date by drag and drop to the max date. If i try to set the max date to min date it worked but only in this direction.

For my uses case sometimes i need to set only one day with the slider. It is possible for every day except the max date i set before.

I´m hoping you can help me. :)

Other options seem working well but range cannot be set in the usual way:

$("#element").rangeSlider({
range: {min: 10, max:50}
});

However, it can be temporary debugged by changing range's default value in jQRangeSliderBar.js directly.
Is it just me or did anyone else have this trouble? (by the way, i have no problem on 3.0.2)

When using this option, labels are not displayed correctly: displayed at the wrong place.

Had a request from our customer to look at this.

This is repeatable on the demo page.

On the date values demo

Set the end date to 2012-01-01

Slide the start date close to it slowly. When the date gets to 2012-12-29 the two date labels swap over.

Im busy working on a project where i am using the Date range slider.

Got requested if its a possibility to make the bar slide when clicking on arrows instead of just adjusting it solidly?

Greetings,

Thanks for the plugin. Minified version does not work for me. Demo version works fine though. Please let me know if you need more details.

In Chrome, right label is shrinked when approaching the right side.

I got a website with search function, like form --> db store --> query db --> show results

on the results page is a "change query" link, which will load the form again with the stored values - working

if i use the browser's back button, it takes me from the results to the form, but the slider resets to default values :(

It does NOT happen in Firefox, but IE and Chrome.

Is this a server fault (caching?!) or could jQRangeSlider be changed to cross-browser remember the last state?