jquery 滑块 刻度条

样式：

.pubr{width: 15%;height: 100%;}
.inputcen{width: 70%;height: 100%;position: relative;}
.inputcen input{display: block;width: 100%;position: absolute;z-index: 2;height: 100%;opacity: 0;}
.lr{background: red;}
.rr{background: red;}
.inputC{display: flex;justify-content: space-between;align-items: center;height: 50px;border: 1px solid #ccc;width:228px;}
.wrap-load{background: #cccccc;height: 100%;position: absolute;top:0px;width: 100%;}
.inner-load{background: pink;height: 100%;position: relative;display: flex;justify-content: center;align-items: center;}
.loadb{height: 10px;width: 10px;background: #000;position: absolute;right: -5px;}

html：

<div id="num" style="position: absolute;left: 0px;top:0px;"></div>
<div class="inputC">
     <div class="pubr lr">-</div>
     <div class="inputcen">

         <div style="width: 80%;margin: 0 auto;position: relative;height: 100%;">
             <input class="inputload" type="range" min="1" max="30" step="1" value="1">
             <div class="wrap-load">
                 <div class="inner-load">
                     <div class="loadb"></div>
                 </div>
             </div>
         </div>

     </div>
     <div class="pubr rr">+</div>
</div>

js：

$(function () {
    var $input=$('input.inputload');
    var inputMax=$input[0].max;
    $input.val(1)

    $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
    $input.on('input',function (e) {
         $('#num').text( $(this).val() );
        $('.inner-load').css({width:($(this).val()/inputMax*100)+'%'})
    });


    $('.pubr.lr').click(function () {
        var getnum=$input.val()

        $input.val(--getnum)
        $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
        $('#num').text( $input.val() );

    });
    $('.pubr.rr').click(function () {
        var getnum=$input.val()

        $input.val(++getnum)
        $('.inner-load').css({width:($input.val()/inputMax*100)+'%'})
        $('#num').text( $input.val() );
    });

});