Chained Sliders - Demo

by Annie Lagang

HTML

<div class="flexify flex-direction-col">
                        <!--<h1 class="tab-content-h1">Community dev. allocation: education (%)</h1>
                        <span class="tab-content-subtitle">This extra label can be used to further explain what the field is for</span>-->

                        <form action="" class="flexify flex-direction-col">
                            <div class="flexify flex-direction-row range-value-container flex-wrap">
                                <div class="flexify flex-direction-col">
                                    <input id="VP_Urug_Ops_comm_dev_alloc_educ-rangeInput" class="range-input chained-sliders-uruguay-ops" type="range" min="0" max="100" step="1" value="0">
                                    <ul class="range-label flexify flex-direction-row">
                                        <li>0</li>
                                        <li>100</li>
                                    </ul>
                                </div>
                                <div class="flexify flex-direction-row">
                                    <input id="VP_Urug_Ops_comm_dev_alloc_educ-rangeValueWindow" class="range-value-window" type="text" placeholder="0"> <label>%</label>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="flexify flex-direction-col">
                        <!--<h1 class="tab-content-h1">Community dev. allocation: health (%)</h1>
                        <span class="tab-content-subtitle">This extra label can be used to further explain what the field is for</span>-->

                        <form action="" class="flexify flex-direction-col">
                            <div class="flexify flex-direction-row range-value-container flex-wrap">
                                <div class="flexify flex-direction-col">
                                    <input...

CSS

/*@font-face {
    font-family: SFNSText-Regular;
    src: url(../fonts/sfns-system-san-francisco.ttf);
}

body {
	background-color: #F2F1ED;
	margin: 0px;
}

textarea, 
input, 
button { 
	outline: none; 
}*/

form {
	margin: 0;
}

header {
	background-color: #ffffff;
	height: 72px;
}

header>div {
	width: 95%;
	margin: 0 auto;
}

header>div>a {
	line-height: 72px;
	font-family: SFNSText-Regular;
	font-size: 16px;
	color: #383737;
	letter-spacing: 0.4px;
	text-transform: capitalize;
	transition: .3s color;
}

header>div>a:hover {
	color: #34888C;
}

#header-img-container {
	margin-right: auto;
}

#header-img-container>div:first-child {
	width: 75px;
	height: 72px;
	margin: 0 15px 0 0;
	background: url(../images/logopic.png) transparent no-repeat scroll 0 0;
	background-size: contain;
}

#header-img-container>div:last-child {
	height: 72px;
    width: 426px;
    margin: auto 0;
    background: url(../images/rnpmoneline.svg) transparent no-repeat scroll 0 17px;
    background-size: contain;
}

header>a {
	text-transform: capitalize;
	margin: auto 0;
}

a {
	font-family: SFNSText-Regular;
	font-size: 16px;
	color: #383737;
	letter-spacing: 0.4px;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

main {
	margin-top: 30px;
}

/*.flex-wrap {
	flex-wrap: wrap;
}

.flex-direction-row {
	flex-direction: row;
}

.flex-direction-col {
	flex-direction: column;
} 

.flex-justify-center {
	justify-content: center;
}*/

#dash-summary,
#your-plans,
#all-plans {
	align-content: space-around;
}

div#your-plans {
    min-width: 200px;
}

.all-plans-clicked {
	font-family: SFNSText-Regular;
	font-size: 16px;
	color: #383737;
	letter-spacing: 0.3px;
	border-bottom: 1px solid #DADDE1;
	height: 48px;
}

.all-plans-close {
	width: 36px;
    height: 36px;
    position: absolute;
    right: 26px;
    top: 5px;
    background: url(../images/close.svg) transparent no-repeat scroll 13px 13px;
    cursor
}

.all-plans-clicked>label {
	height: 100%;
	line-height:...

JavaScript

$(function(){
		// realtime textbox/input update on slider drag
    $('.range-value-container .flexify').children('input.range-input').on('mousemove change', function () {
        $(this).parent().next().children('input').val($(this).val());
    });

		// trigger SignalR code if the slider value is changed via textbox/input beside it
    $('.range-value-window').on('input', function () {
        var range = $(this).parent().prev().find('input[type=range]');
        var inputValue = $(this).val();
        if (!$.isNumeric(inputValue)) {
            inputValue = 0;
        }
        range.val(inputValue);
        range.trigger('input');
		});
    
    var slidersUrugOps =  $('.chained-sliders-uruguay-ops');
    var max = 100;
    
    slidersUrugOps.each(function() {      
      $(this).on('input', function () {            
          var currentSlider = $(this);
          var currentValue = parseInt(currentSlider.val(), 10);
          
          var allocated = 0;
          // sum values from other sliders
          slidersUrugOps.not(this).each(function() {
          	var otherSlider = $(this);
          	allocated += parseInt(otherSlider.val(), 10);
          });
          
          // then add value from current slider
          allocated += currentValue;          					
          
          var unallocated = 0;          
          if(allocated < max) {
         		unallocated = max - allocated; 
            $('#allocated').css('color', 'red');
          } else if (allocated == max) {
          	unallocated = 0;
            $('#allocated').css('color', 'green');
          } else {
          	unallocated = 0;
            $('#allocated').css('color', 'red');
          }
          
          $('#allocated').html(allocated);
					$('#unallocated').html(unallocated);
    	});
    });
});