Min max slider value is jumping on another slider

I am trying to make 3 to 4 slider at one place my slider is moving fine but the slider value is not moving properly, if I am moving 1st slider then value should change for that 1st slider, in my case value is changing for 3rd slider, here is my jsfiddle.

<div class="container" style="margin-top: 40px;">
    	<div class="row text-center">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
                    <input id="range-slider1" type="range" min="0" max="1000" step="5" value="0">
                </div>
            </div>
    	</div>
    </div>
    <div class="container" style="margin-top: 40px;">
    	<div class="row text-center">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
                    <input id="range-slider2" type="range" min="0" max="1000" step="5" value="0">
                </div>
            </div>
    	</div>
    </div>
    <div class="container" style="margin-top: 40px;">
    	<div class="row text-center">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
                    <input id="range-slider3" type="range" min="0" max="1000" step="5" value="0">
                </div>
            </div>
    	</div>
    </div>
    
    **CSS:**
    /* Price slider */
    .rangeslider,
    .rangeslider__fill {
      display: block;  
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
    .rangeslider {
      background: #e6e6e6;
      position: relative;
    }
    .rangeslider--horizontal {
      height: 1px;
      width: 100%;
    }
    .rangeslider--disabled {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
      opacity: 0.4;
    }
    .rangeslider__fill {
      background: #de2d40;
      position: absolute;
    }
    .rangeslider--horizontal .rangeslider__fill {
      top: 0;
      height: 100%;
    }
    .rangeslider__handle {
      background: #de2d40;
      color: #FFFFFF;  
      cursor: pointer;
      display: inline-block;
      width: 5.2em;
      height: 2.2em;
      position: absolute;    
      -moz-border-radius: 22px;
      -webkit-border-radius: 22px;
      border-radius: 22px;    
      line-height: 2.2em;
      text-align: center;
    }
    .rangeslider__handle:before {
        font-family: 'Glyphicons Halflings';
        content: "\e079";
        font-size: 11px;
        opacity: 0.5;
        margin: 0 3px;
        color: #fff;
        display: block;    
        position: absolute;
        top: 0;
        left: 5px;    
        bottom: 0;  
    }
    .rangeslider__handle:after {
        font-family: 'Glyphicons Halflings';
        content: "\e080";
        font-size: 11px;
        opacity: 0.5;
        margin: 0 3px;
        color: #fff;
        display: block;    
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;  
    }
    .rangeslider--horizontal .rangeslider__handle {
      top: -15px;
      touch-action: pan-y;
      -ms-touch-action: pan-y;
    }
    input[type="range"]:focus + .rangeslider .rangeslider__handle {
      -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
      -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
      box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    }
    
    **JQuery**
    $(document).ready(function() {
    
        var $element = $('input[type="range"]');
        var $handle;
    
        $element.rangeslider({
            polyfill: false,
            onInit: function() {
                $handle = $('.rangeslider__handle', this.$range);
                updateHandle($handle[0], this.value);
                $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value);
            }
        }).on('input', function() {
            updateHandle($handle[0], this.value);
            $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value);
        });
    
        function updateHandle(el, val) {
            el.textContent = val;
        }
    
        $('input[type="range"]').rangeslider();
        
    });

your early reply appreciated.

Thanks.

The problem is that you defined $handle in a common scope, so each .onInit() call reassigns a new object to it; and after all sliders got initialised, all of them keep referring to the last one. To solve this, you might create a dedicated closure for .each() element like so:

$element.each(function () {
  var $handle
  
  $(this).rangeslider({
    polyfill: false,
    onInit: function () {
      $handle = this.$range
      	.find('.rangeslider__handle')
        .text(this.value)
    }
  }).on('input', function() {
  	$handle.text(this.value)
  })
})

BTW you’re initialising the sliders twice in the $(document).ready() callback, although that seems to get ignored… anyway here’s an updated fiddle.

Edit: Actually you might also provide an .onSlide() callback instead of the separate event listener, so that you can assign $handle directly to this

$element.rangeslider({
  polyfill: false,
  onInit: function() {
    this.$handle = this.$range
      .find('.rangeslider__handle')
      .text(this.value)
  },
  onSlide: function (_, value) {
  	this.$handle.text(value)
  }
})

(fiddle)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.