【javascript】【jquery】スライダーの値を特定の箇所で吸着したい

例えば2-1024までの値のスライダーで、選べる値は2のn乗のみとしたい。
つまり、選べる値は2,4,8,16,32,64,128,256,512,1024とする。

<div class="ui-field-contain" id = "sliderdiv">
   <label for="slider">値</label>
   <input id="slider"  type="range" min="2" max="1024" step="1" value=2/>
</div>
<script>
    var keys = [2,4,8,16,32,64,128,256,512,1024];
    var keys_length =keys.length;
$(function(){
   $("#sliderdiv").on("change", "#slider", function() {
      var tmpvalue = $("#slider").val();
      for(var n=0;n<keys_length;n++)
      {
         if(tmpvalue<=keys[n])
         {
            break;
         }
      }
      if((keys[n]+keys[n+1])/2<tmpvalue)
      {
         $("#slider").val(keys[n+1]);
      }
      else {
         $("#slider").val(keys[n]);
      }
      if($("#slider").val()!=tmpvalue)//これ書いておかないと無限に処理を繰り返してしまう
      {
         $("#slider").slider('refresh');
      }
   })
})
</script>

【javascript】【jquery】スライダーの値によって、buttonを無効（disable）にする

よし、やる気ボタンを押すと仕事をやる気を出すぞ。
でも、暑かったり寒かったりしたらやる気ボタンが表示されないぞ。しょうがない。
という仕組み。
sliderって単純に$("#slider").on("change",function(){...})
じゃ処理は起動しないのね

<div class="ui-field-contain" id = "sliderdiv">       <label for="slider">気温</label>
    <input id="slider"  type="range" min="0" max="100" step="1" value=0 />
</div>
<button id ="yaruki">
やる気ボタン
</button>

<script>
$(function(){
    $("#sliderdiv").on("change", "#slider", function() {
    //または、$("input#slider").live("change", function() {
        var slider_value = $("#slider").val();
        if(15<=slider_value&&slider_value<=25)
        {
            $('#yaruki').prop('disabled', false);//非表示をオフにする。つまり、表示。
        }else{
            $('#yaruki').prop('disabled', true);
        }
    })
})
</script>