html 具有动态值的自定义侧滑块

Posted 2021-05-11

http://seiyria.com/bootstrap-slider/

HEADER:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css" />




BODY:
$75 /mo 3 EMPLOYEES  +    $6 /mo ADDITIONAL EMPLOYEE
<input id="ex1" type="text" data-slider-id="ex1Slider" data-slider-min="3" data-slider-max="20" data-slider-step="1" data-slider-value="3" data-slider-monthly="75" />

<p style="text-align: center;">Drag slider to calculate your payroll price</p>



FOOTER:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>    

<script>
    jQuery(document).ready(function() {
        var additional = 6 ;
        var monthly = 75 ;
        jQuery('#ex1').slider({
            tooltip:'always', // show tooltip always

/*
                // if value = 3 , monthly = 75 , additional = 0    6*3-3 = 0
                // if value = 4 , monthly = 75 , additional = 6    6*4-3
                // if value = 5 , monthly = 75 , additional = 12   6*5-3
                // if value = 6 , monthly = 75 , additional = 18   6*6-3
				// ...
                // if value = n , monthly = 75 , additional  =     6*n-3

*/
            formatter: function(value) {
                console.log('in slider') ;
               // if ( value == 3 ) {  TEST 
               //     return 'Employees: ' + value + ' / ' + 'Per Month: $' + ( monthly ) ;  // base
               // }

                return value + ' Employees ' + ' |  $' + parseInt(monthly + additional * (value-3) ) + ' /mo'   ;
            }
        });

    });
</script>