How to adjust size?

[toddmedema]

Hello,

We're initializing the slider like so:

$('#dateSlider').jRange({
  from: 0,
  to: 365,
  step: 1,
  showScale: false,
  format: (value) => { return moment(year+'-01-01').add(value, 'days').format('MMM D'); },
  width: $(".slider-wrapper").width(),
  isRange : true,
  snap: true,
  theme: 'theme-blue',
  ondragend: (value) => {
    value = value.split(',');
    filters.startDay = moment(year+'-01-01').add(value[0], 'days');
    filters.endDay = moment(year+'-01-01').add(value[1], 'days');
    updateViz();
  },
});

but, despite $(".slider-wrapper").width() changing on window resize, the slider size isn't changing.

I also tried setting width to '100%', but that led to strange behavior (on the top bar):

Is there a way to call .resize on these sliders? Is there a fixable bug with relative widths?

[vpekarek]

Hi, I made two functions to make this work:

reset: function() {
      this.inputNode.next().remove();
      this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : '' + this.options.from);
      this.domNode = $(this.template);
      this.domNode.addClass(this.options.theme);
      this.inputNode.after(this.domNode);
      this.domNode.on('change', this.onChange);
      this.pointers = $('.pointer', this.domNode);
      this.lowPointer = this.pointers.first();
      this.highPointer = this.pointers.last();
      this.labels = $('.pointer-label', this.domNode);
      this.lowLabel = this.labels.first();
      this.highLabel = this.labels.last();
      this.scale = $('.scale', this.domNode);
      this.bar = $('.selected-bar', this.domNode);
      this.clickableBar = this.domNode.find('.clickable-dummy');
      this.interval = this.options.to - this.options.from;
      this.render();
},
	setWidth: function(width) {
	this.options.width = width;
	this.domNode.width(this.options.width);
	this.reset();
	},

and my html looks like this:

<div style="width:40%;margin:0 auto;">

   	<div style="border:1px solid black;width:50%;">
   		<input type="hidden" class="single-slider" value="165" />
	</div>

</div>
    <script src="jquery.range.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.single-slider').jRange({
                from: 130,
	            to: 220,
	            step: 1,
	            showLabels: false,
	            showScale: false,
	            snap: true,
	            isRange: false,
	            format: "%s",
            });
        });

        $(window).resize(function() {
        	$('.single-slider').jRange("setWidth", $('.single-slider').parent("div").width()); // set correct width
        });
    </script>

Something like this should be in next version?

[bat020]

We've had a similar problem getting the bars to resize dynamically. Our solution was to add a few lines to the resize event handler:

$(window).resize(function() {
  // *** ADDITIONAL CODE TO SET WIDTH ***
  var width = data.domNode.parent().width();
  data.options.width = width;
  data.render();
  // *** ADDITIONAL CODE ENDS ***
  data.setValue(data.getValue());
}); // Update slider position when window is resized to keep it in sync with scale

[szed]

@bat020
Could you help me use your snippet ?
Not sur how i need to use it.
What is "data" ?

Thanks!

[bat020]

hi @szed – to clarify, the code snippet above should replace lines 384-386 here:
https://github.com/nitinhayaran/jRange/blob/master/jquery.range.js#L384

[operatorone]

@bat020

Hi there,
can you help me out with the resizing? I added your snippet of the event handler to my JS-Code section at the bottom of my html template

$(window).resize(function() {
  // *** ADDITIONAL CODE TO SET WIDTH ***
  var width = data.domNode.parent().width();
  data.options.width = width;
  data.render();
  // *** ADDITIONAL CODE ENDS ***
  data.setValue(data.getValue());
}); // Update slider position when window is resized to keep it in sync with scale

and changed the code in the jquery.range.js at line 384-386, but I can't get it to work.

Additionaly I could set a %-width on the range-slider, but the single slider breaks if I add e.g. width: '95%' and is stuck at 0 and shows 456789 in the label.

[UrielNicolas]

We've had a similar problem getting the bars to resize dynamically. Our solution was to add a few lines to the resize event handler:

$(window).resize(function() {
  // *** ADDITIONAL CODE TO SET WIDTH ***
  var width = data.domNode.parent().width();
  data.options.width = width;
  data.render();
  // *** ADDITIONAL CODE ENDS ***
  data.setValue(data.getValue());
}); // Update slider position when window is resized to keep it in sync with scale

I can confirm it works, just make sure the parent is responsive, because if it has fixed width it won't resize the bar