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 class="range-input chained-sliders-uruguay-ops" type="range" min="1" max="20" step="1">
                                    <ul class="range-label flexify flex-direction-row">
                                        <li>1</li>
                                        <li>20</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>

CSS

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: 48px;
}

.all-plans-clicked>label:first-child {
	margin: 0 auto 0 40px;
}

.all-plans-clicked>label:last-child {
	margin: 0 40px 0 auto;
}

.anchor-button {
	font-family: SFNSText-Regular;
	font-size:...

JavaScript

$(function(){
		$('.range-value-container .flexify').children('input.range-input').on('mousemove change', function () {
        var value = $(this).val();
        var formatted = numberWithCommas(value);
        $(this).parent().next().children('input').val(formatted);
    });
});