Click on the range and make the slider cursor jump to the clicked position

[nige123]

I'd like the user to able to click anywhere on the slider bar and have the cursor jump to that position. Is that possible?

[ghusse]

That's a good idea, unfornately, there is no simple way of doing that currently.

[ghusse]

In fact, if you're allowing that, user will not be able to grab the bar and move the whole range. What you want looks like jquery-ui standard slider component.

[ncoquelet]

Here a workaround using the scales option !

• you need to use the *-withRule.js
• use scales option to create the dom structure wich can handle the user click
• the scale next function must represent your click interval
• and redefine the formatfunction to handle the click event and change the selector position

/!\ if you don't want to see rules, label function must return null and redefine the css to avoid the border ! /!\/!\ we can't destroy the event listener with this workaround, so use it with precaution !!

Based on documentation example

$("#rulersExample").rangeSlider({
  scales: [
  // Primary scale
  {
    first: function(val){ return val; },
    next: function(val){ return val + 10; },
    stop: function(val){ return false; },
    label: function(val){ return val; },
    format: function(tickContainer, tickStart, tickEnd){ 
      tickContainer.addClass("myCustomClass");
    }
  },
  // Secondary scale
  {
    first: function(val){ return val; },
    next: function(val){
      if (val % 10 === 9){
        return val + 2;
      }
      return val + 1;
    },
    stop: function(val){ return false; },
    label: function(){ return null; },
    format: function(tickContainer, tickStart, tickEnd){ 
      tickContainer.on("click", function() {
        var current = $("#rulersExample").rangeSlider("values");
        var diff = current.max - current.min;
        $("#rulersExample").rangeSlider("values", tickStart, tickStart + diff);
      });
    }
  }]
});

and

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
  $("#dateRulersExample").dateRangeSlider({
    bounds: {min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)},
    defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)},
    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 months[value.getMonth()];
      },
      format: function(tickContainer, tickStart, tickEnd){
        tickContainer.addClass("myCustomClass");
      }
    },
    {
      first: function(value){ return value; },
      end: function(value) {return value; },
      next: function(value){
        var next = new Date(value);
        return new Date(next.setDate(value.getDate() + 1));
      },
      label: function(value){
        return null;
      },
      format: function(tickContainer, tickStart, tickEnd){
        var current = $("#dateRulersExample").dateRangeSlider("values");
        var diff = ((current.max - current.min) / (1000*60*60*24));
        var end = new Date(tickStart);
        var end = new Date(end.setDate(end.getDate() + diff));
        $("#dateRulersExample").dateRangeSlider("values", tickStart, end);
      }
    }]
  });

[ghusse]

Thanks for sharing your solution!

On Thu, May 21, 2015 at 1:32 PM, ncoquelet notifications@github.com wrote:

Here a workaround using the scales option !

• you need to use the *-withRule.js
• use scales option to create the dom structure wich can handle the user click
• the scale next function must represent your click interval
• and redefine the formatfunction to handle the click event and change the selector position

/!\ if you don't want to see rules, label function must return null and redefine the css to avoid the border ! /!\/!\ we can't destroy the event listener with this workaround, so use it with precaution !!

Based on documentation example

$("#rulersExample").rangeSlider({ scales: [ // Primary scale { first: function(val){ return val; }, next: function(val){ return val + 10; }, stop: function(val){ return false; }, label: function(val){ return val; }, format: function(tickContainer, tickStart, tickEnd){ tickContainer.addClass("myCustomClass"); } }, // Secondary scale { first: function(val){ return val; }, next: function(val){ if (val % 10 === 9){ return val + 2; } return val + 1; }, stop: function(val){ return false; }, label: function(){ return null; }, format: function(tickContainer, tickStart, tickEnd){ tickContainer.on("click", function() { var current = $("#rulersExample").rangeSlider("values"); var diff = current.max - current.min; $("#rulersExample").rangeSlider("values", tickStart, tickStart + diff); }); } }] });

and

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; $("#dateRulersExample").dateRangeSlider({ bounds: {min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)}, defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)}, 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 months[value.getMonth()]; }, format: function(tickContainer, tickStart, tickEnd){ tickContainer.addClass("myCustomClass"); } }, { first: function(value){ return value; }, end: function(value) {return value; }, next: function(value){ var next = new Date(value); return new Date(next.setDate(value.getDate() + 1)); }, label: function(value){ return null; }, format: function(tickContainer, tickStart, tickEnd){ var current = $("#dateRulersExample").dateRangeSlider("values"); var diff = ((current.max - current.min) / (1000_60_60*24)); var end = new Date(tickStart); var end = new Date(end.setDate(end.getDate() + diff)); $("#dateRulersExample").dateRangeSlider("values", tickStart, end); } }] });

— Reply to this email directly or view it on GitHub https://github.com/ghusse/jQRangeSlider/issues/56#issuecomment-104235835 .