Распределение процентов между блоками jQuery

276

08 декабря 2017, 03:23

Всем привет, есть задача распределить проценты пропорционально не могу понять как правильно сделать может кто подскажет в каком направлении двигаться ,

есть джиквери слайдеры https://jqueryui.com/slider/ их у меня 7 http://prntscr.com/hjwpx8 мне нужно чтобы при сдвиге одного слайдера все остальные тоже менялись чтобы общая сумма не превышала 100, к примеру если биткоин 100 то все остальные должны быть 0 или литкоин и биткоин 50% то все остальные 0 примерно так http://prntscr.com/hjwrc3

или вообще это реально сделать с этими слайдерами? код

$(function () { 
    $("#set_bitcoin").slider({ 
        range: "min", 
        value: 23, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#bitcoin").val(ui.value + "%"); 
        } 
    }); 
    $("#bitcoin").val($("#set_bitcoin").slider("value") + "%"); 
}); 
 
$(function () { 
    $("#set_litecoin").slider({ 
        range: "min", 
        value: 20, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#litecoin").val(ui.value + "%"); 
        } 
    }); 
    $("#litecoin").val($("#set_litecoin").slider("value") + "%"); 
}); 
$(function () { 
    $("#set_dash").slider({ 
        range: "min", 
        value: 3, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#dash").val(ui.value + "%"); 
        } 
    }); 
    $("#dash").val($("#set_dash").slider("value") + "%"); 
}); 
 
 
$(function () { 
    $("#set_dogecoin").slider({ 
        range: "min", 
        value: 3, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#dogecoin").val(ui.value + "%"); 
        } 
    }); 
    $("#dogecoin").val($("#set_dogecoin").slider("value") + "%"); 
}); 
 
$(function () { 
    $("#set_ethereum").slider({ 
        range: "min", 
        value: 10, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#ethereum").val(ui.value + "%"); 
        } 
    }); 
    $("#ethereum").val($("#set_ethereum").slider("value") + "%"); 
}); 
$(function () { 
    $("#set_namecoin").slider({ 
        range: "min", 
        value: 3, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#namecoin").val(ui.value + "%"); 
        } 
    }); 
    $("#namecoin").val($("#set_namecoin").slider("value") + "%"); 
}); 
$(function () { 
    $("#set_blackcoin").slider({ 
        range: "min", 
        value: 1, 
        min: 0, 
        max: 100, 
        slide: function (event, ui) { 
            $("#blackcoin").val(ui.value  + "%"); 
        } 
    }); 
    $("#blackcoin").val($("#set_blackcoin").slider("value") + "%"); 
});

  <div class="col-md-6 col-lg-3"> 
                <div class="block_maining_set bg_litecoin"> 
                    <h3>Litecoin</h3> 
                    <div class="result_mining">33317.1613708756 BTC</div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за час</h4> 
                        <p>16.6011904762 Bitcoin</p> 
                    </div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за 24 час</h4> 
                        <p>446.4285714285 Bitcoin</p> 
                    </div> 
                </div> 
                <div class="set_procent"> 
                    <div id="set_litecoin"></div> 
                    <p> 
                        <input type="text" id="litecoin"  value="" readonly> 
                    </p> 
                </div> 
            </div> 
 
            <div class="col-md-6 col-lg-3"> 
                <div class="block_maining_set bg_dash"> 
                    <h3>Dash</h3> 
                    <div class="result_mining">33317.1613708756 BTC</div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за час</h4> 
                        <p>16.6011904762 Bitcoin</p> 
                    </div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за 24 час</h4> 
                        <p>446.4285714285 Bitcoin</p> 
                    </div> 
                </div> 
                <div class="set_procent"> 
                    <div id="set_dash"></div> 
                    <p> 
                        <input type="text" id="dash"  value="" readonly> 
                    </p> 
                </div> 
            </div> 
 
            <div class="col-md-6 col-lg-3"> 
                <div class="block_maining_set bg_dogecoin"> 
                    <h3>Dogecoin</h3> 
                    <div class="result_mining">33317.1613708756 BTC</div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за час</h4> 
                        <p>16.6011904762 Bitcoin</p> 
                    </div> 
                    <div class="zarabotoc"> 
                        <h4>Заработок за 24 час</h4> 
                        <p>446.4285714285 Bitcoin</p> 
                    </div> 
                </div> 
                <div class="set_procent"> 
                    <div id="set_dogecoin"></div> 
                    <p> 
                        <input type="text" id="dogecoin"  value="" readonly> 
                    </p> 
                </div> 
            </div> 
 
            <div class="center_position"> 
 
 
                <div class="row"> 
                    <div class="col-md-6 col-lg-4"> 
                        <div class="block_maining_set bg_ethereum"> 
                            <h3>Ethereum</h3> 
                            <div class="result_mining">33317.1613708756 BTC</div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за час</h4> 
                                <p>16.6011904762 Bitcoin</p> 
                            </div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за 24 час</h4> 
                                <p>446.4285714285 Bitcoin</p> 
                            </div> 
                        </div> 
                        <div class="set_procent"> 
                            <div id="set_ethereum"></div> 
                            <p> 
                                <input type="text" id="ethereum"  value="" readonly> 
                            </p> 
                        </div> 
                    </div> 
 
                    <div class="col-md-6 col-lg-4"> 
                        <div class="block_maining_set bg_namecoin"> 
                            <h3>Namecoin</h3> 
                            <div class="result_mining">33317.1613708756 BTC</div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за час</h4> 
                                <p>16.6011904762 Bitcoin</p> 
                            </div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за 24 час</h4> 
                                <p>446.4285714285 Bitcoin</p> 
                            </div> 
                        </div> 
                        <div class="set_procent"> 
                            <div id="set_namecoin"></div> 
                            <p> 
                                <input type="text" id="namecoin"  value="" readonly> 
                            </p> 
                        </div> 
                    </div> 
 
                    <div class="col-md-6 col-lg-4"> 
                        <div class="block_maining_set bg_blackcoin"> 
                            <h3>Blackcoin</h3> 
                            <div class="result_mining">33317.1613708756 BTC</div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за час</h4> 
                                <p>16.6011904762 Bitcoin</p> 
                            </div> 
                            <div class="zarabotoc"> 
                                <h4>Заработок за 24 час</h4> 
                                <p>446.4285714285 Bitcoin</p> 
                            </div> 
                        </div> 
                        <div class="set_procent"> 
                            <div id="set_blackcoin"></div> 
                            <p> 
                                <input type="text" id="blackcoin"  value="" readonly> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
 
            </div> 
 
        </div>