Показать сообщение отдельно
  #5 (permalink)  
Старый 04.09.2019, 17:21
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 477

<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://s3.amazonaws.com/so-answers/jquery.range.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/so-answers/jquery.range-modified.js"></script>
<script>


</script>
<style>
    #quant1 { pointer-events: none; }
</style>


</head>
<body>
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant1" value="0" />
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant2" value="0" />

<div id="foo2" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant3" value="0" />
<div id="foo3" style="height: 100px; width: 100%;" ></div>
<div id="totalRemaining">100 </div>


<script >
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 < 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;
    }
}
</script>
</body>
</html>

Последний раз редактировалось join, 04.09.2019 в 17:22. Причина: test
Ответить с цитированием