title: How can I disable clicks for a jRange slider?
body: <p>I'm using a jRange slider which takes a hidden HTML input and adds a custom slider , and customizing it so that, with three sliders, the total value won't exceed 100. I've managed to get everything working fine for click-and-drag however simply clicking on the slider itself allows the handle to move beyond the acceptable range. I've tried various ways to disable clicks, but none seem to have any effect. i.e. </p>
  
  <pre><code>#quant1 { pointer-events: none; }
  
  $("#quant1").on("click mouseup mousedown", function(e){
  e.preventDefault();
  console.log("trying to intercept----");
  return false;
  });
  
  $("#quant1").unbind("click");
  </code></pre>
  
  <p>My code is below </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script src="./jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="./jquery.range.css"&gt;
  &lt;script src="./jquery.range.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
  &lt;/script&gt;
  &lt;style&gt;
      #quant1 { pointer-events: none; }
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="foo1" style="height: 100px; width: 100%;" &gt;&lt;/div&gt;
  &lt;input type="hidden" id="quant1" value="0" /&gt;
  &lt;div id="foo1" style="height: 100px; width: 100%;" &gt;&lt;/div&gt;
  &lt;input type="hidden" id="quant2" value="0" /&gt;
  
  &lt;div id="foo2" style="height: 100px; width: 100%;" &gt;&lt;/div&gt;
  &lt;input type="hidden" id="quant3" value="0" /&gt;
  &lt;div id="foo3" style="height: 100px; width: 100%;" &gt;&lt;/div&gt;
  &lt;div id="totalRemaining"&gt;100 &lt;/div&gt;
  
  
  &lt;script &gt;
  var maxVal=100;
  $_slider1= $("#quant1");
  $_slider1.find('.ui-slider-handle');
  $_slider2= $("#quant2");
  
  
  
  
  // With JQuery
  $('#quant1').jRange(
  {
      from: 0.0,
      to: 100.0,
      step: 1,
      scale: [0,25,50,75,100],
      format: '%s',
      width: 300,
      showLabels: true,
      snap: true,
      id: "thisisanid",
      slide:function(){console.log("sliding")},
      ondragend: function(){  console.log("ondragend");    
          var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
          if (reduceSliderVal){$_slider1.jRange('setValue', ""+reduceSliderVal);}
      }
  }).change(function(){
      console.log("change");
          var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
          if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
          setTimeout(function(){ 
              console.log("slider 1 timeout onchange");
  
              var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
              if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
  
          }, 3000);
           //reduces the current slider val if needed
           $_slider1.trigger("ondragend");
              console.log("onchange slider1", reduceSliderVal); 
              console.log("after");
  }).on('input mousedown mouseup touchstart click change ondrag', function (e) {
      console.log("triggering dragend slider1");
      $_slider1.trigger("ondragend");
  
  });
  
  $('#quant2').jRange({
      from: 0,
      to: 100,
      step: 1,
      scale: [0,25,50,75,100],
      format: '%s',
      width: 300,
      showLabels: true,
      ondragend: function(){      
          var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
          if (reduceSliderVal){$_slider2.jRange('setValue', ""+reduceSliderVal);}
      }
  }).change(function(){
          var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
          if (reduceSliderVal){ $_slider2.jRange('setValue', ""+reduceSliderVal);} //reduces the current slider val if needed
  });
  
  function reduceSlider(currentSlider, otherSlider, otherSlider2)
  { // if the slider value of the just-moved slider is too high, reduce it to the appropriate amount
       var negativeExcess= maxVal -  ( parseInt(currentSlider.val() ) + parseInt(otherSlider.val() ) );
  
      if (negativeExcess &lt; 0)
      {
           console.log("excess calculated", negativeExcess);
           console.log("returning ", (maxVal - parseInt( otherSlider.val() )  )  );
          return (maxVal - parseInt(otherSlider.val())  ); //calculate remainder without involving the current slider since the user may drag the current slider too far beyond the max value, resulting in the current slider being set backwards too far. 
      }else{
              return false;
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>