http://jsbin.com/apaduf/3

Also, notice there are some timing issues if you try to use a for-loop to create and destroy the slider several times. That's why I had to use setTimeout and a recursive function.

I'll try to investigate the reasons for the leak once I'm back from lunch.

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

DEMO - Setting values via the values, min, or max methods on dateRangeSlider causes invalid results on the slider.

Expected Results

Actual Results

Initialization

$("#slider").dateRangeSlider({
    bounds:{
      min: new Date("2013-01-01 00:00:00"),
      max: new Date("2013-12-31 00:00:00")
    },
    defaultValues:{
      min: new Date("2013-01-01 00:00:00"),
      max: new Date("2013-12-31 00:00:00")
    } 
});

Setting Values After initialization, the slider is in a valid state. Calling any of the below function causes the slider to become invalid:

$("#slider").dateRangeSlider("min", new Date("2013-05-01 00:00:00"));

$("#slider").dateRangeSlider("max", new Date("2013-11-30 00:00:00"));

$("#slider").dateRangeSlider("values",
    new Date("2013-05-01 00:00:00"),
    new Date("2013-11-30 00:00:00")
);

I went through (past releases list)[http://jquery.com/download/] of jQuery to find the latest working version. 1.7.2 works, but anything higher does not.

The problem being that the slider instantiates and sets up the UI, but the default value displays "NaN" and the slider handles cannot be pulled on.

I'm totally down to dig into the code and see what's up, but thought I'd ask here first to see if anyone has encountered/fixed.

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?

Hi. How to set offset for handles positioning, so handles were not inside, but outside selection bar? So visually and functionally bar was inside handles, but not handles inside a bar. One of main reasons for this - if date range is like 2-3 years, and i'm trying to select a "week" from this, handles with width 52px are overlapping.

Here's some example on what i actually mean: http://jsfiddle.net/zrbCj/713/

edit: "also i need same offsets for labels"

Since options.defaultValues is only used on _create there is no point in setting its value later through .option('defaultValues', ...).

Changing the range or bounds just after the initialization may yield to the same kind of bug but this patch only takes care about setting the values.

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 am using this code to make my slider.

$(".timescale").dateRangeSlider({
    monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            bounds: {min: new Date(self._startDate), max: new Date(self._endDate)},
            defaultValues: {min: new Date(startVal), max: new Date(endVal)},
            formatter: function (val) {
                return getFormattedDate(val,'dd-M');
            },
            scales: [{
                first: function (value) {
                    return value;
                },
                end: function (value) {
                    return value;
                },
                next: function (value) {
                    var next = new Date(value);
                    return new Date(next.setMonth(value.getMonth() + 1));
                },
                label: function (value) {
                    return monthNames[value.getMonth()];
                },
                format: function (tickContainer, tickStart, tickEnd) {
                    tickContainer.addClass("myCustomClass");
                }
            }]
        });

Issue is if i start my date other than 1 or 2nd of any month it did not give accurate scale. Like if you have started the dates and bound the dates between 10-Mar-2017 to any other date. scaling for the months start at the wrong place.

As you can see the april is starting where the date is 10-April. It should be on the 1-April. It is due to slider starting from 10-Mar

Hello ! I am using this plugin and i must admit that this is a very helpful. I am using this as a slider on my chart and i am getting a problem. Is there anyway i can specify the width of the container. ?

Let me describe my problem. I am using date range slider. To which i passed an array of the dates. but when the window load the container class ui-rangeSlider-container and ui-rangeSlider-innerBar appears with the width of only 58. While i want a long range to slide about 680px. I have also tried to use the css to do this by specifying the width as !important and it works but then the labels pointers appears at wrong positon. Can you please help me in this regard?

I implemented ticks into my slider. If i set the date to lets say Feb, 13 2012 - feb, 13 2013 the starting tick doesn't overflow past the slider.

The min date in this image is set to be 1 year prior to the current date. This is offsetting the dates on labels to not coincide with the ticks. So basically the first tick of the slider will still show as February 13, 2013 thus making all other ticks off by about 2 weeks. We have a basic work around right now by constantly making that first one start at the first day of the month.

Thanks!

Bonjour,

I have been using this module in my project under JQuery UI 1.12.0 / JQuery 3.6.0 with all succes.   

But now, when testing under JQuery UI 1.13.0 / JQuery 3.6.0, the 'date' label/handle do not display.

Any ideas why this happens, ... and what could be the solution ?

Thank you for this great tool.

Claude,

Ontario, Canada

Bumps hosted-git-info from 2.1.4 to 2.8.9.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps grunt from 0.4.5 to 1.3.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps ini from 1.3.4 to 1.3.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hi Ghusse,

I tried to implement range slider with two editable labels. I'm able to get two labels with rangeSlider but I want them to be editable, so I used editRangeSlider but it's giving me only one edit label.

I also tried with values , 10, 20 but no luck.

Here my fiddle

Please help me if I have done something wrong.

Thanks