rangeslider.js mousedown event not working on slider button

Question

Mouse event is not firing. Need to know the hold event so can disable the update of slider value. my code is,

var sliding = false;
function update_seek_value(value){
  if(!sliding){
            $("#replay-slider").val(value).change();
  }
}
$('.slider_button_class_name').on('mousedown',function(){
   sliding = true;
});

Answer 1

$("#range-control").rangeslider({
    polyfill: false,
    onSlideEnd: function(position, value){
        //console.log('Position', position, 'Value', value);
        $("#selectedRange").text(value);
    }
});

body, input[type=text] { text-align: center; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.js"></script>
<input id="range-control" type="range" min="0" max="100" step="1" value="0">
<span id="selectedRange"></span>  

Hope this helps!

Answer 2

Thank you for the assistance on this anyway i found the solution on my own.Hope this will help someone who is stuck to similar kind of problem. Solution was to override the js 'rangeslider.min.js'

As of my knowledge one can disable the 'events' either by using $('selector').off("mousedown") or stoping the event propogation. i was using '/yourlocalpath/rangeslider.js' mentioned in rangeslider.js.org there is a javascript event that is stoping the propogation event for events like mousedown and touchstart,but basically it is listening to mousdown event so i updated my flag just above the code of stop event popogation. The code in rangeslider.js where i added my flag.

j.prototype.handleDown = function(a) {
console.log("mousedown event triggered"); // TRY TO FIND THIS LINE IN YOUR DOWNLOADED JS OF RANGESLIDER
sliding = true;                           // ADD YOUR MOUSEDOWN EVENTS HERE
if (a.preventDefault(), this.$document.on(this.moveEvent, this.handleMove), this.$document.on(this.endEvent, this.handleEnd), !((" " + a.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1)) {
  var b = this.getRelativePosition(a),
    c = this.$range[0].getBoundingClientRect()[this.DIRECTION],
    d = this.getPositionFromNode(this.$handle[0]) - c,
    e = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;
  this.setPosition(e), b >= d && b < d + this.handleDimension && (this.grabPos = b - d)
}
}