Develop Reference

How to change animated status bar value with same class but different part

I do need for these status bars to work for each own. Maybe also the buttons could worked. I tried to acquire the value of "data-bar" without succeed (the script does still can process the "data-max"). And seems that the script does apply to all bars, not individually, while I need that it differs for each bar.
In html:
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>
In script:
<script>
/* Requiring jQuery.js */
$(document).ready( function(){
/* Print the bar elements at the screen */
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
/* Animating a changed variable */
setInterval(function(){ // 2 second interval change
/* Get attr value from the stat bar */
var bar = $(".stat-bar");
if (bar){ // bar
var maxStat = bar.attr("data-bar-max");
/* Probably working area (remove "//" from a case and add it to all other case) */
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */
// var currentStat = Math.floor((Math.random() * 100) + 50);
/* Case B (testing):: manual attr value for test (it works) */
var currentStat = 41;
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */
// var currentStat = bar.attr("data-bar");
/* END Probably working area */
if (currentStat > maxStat){currentStat = maxStat;
} else if (currentStat < 0){currentStat = 0;
} else {currentStat = currentStat;}
} // END bar
var a = currentStat * (100 / maxStat);
$(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
setTimeout(function(){
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);
$(".stat-bar-main").animate({"width": a + "%"}, 700);
}, 400);
}, 2000); // END 2 second interval change
});
</script>
In css:
<style>
.stat-bar{
background-color: #ACB597;
height: 26px;width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main{
background-color: #464D51;
height: 30px;width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min{height: 100%;width: 100%;}
.stat-bar-main-shade-plus{
height: 100%;width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);
opacity: 0.35;
}
.stat-bar-text{
color: rgba(255,255,255,0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
</style>

You can use each loop to iterate through your divs and get required values i.e : attributes then use $(this).find("someclass") to get reference of divs where you need to change widths and texts.
Demo Code :
$(document).ready(function() {
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
setInterval(function() {
//loop through stat bar
$(".stat-bar").each(function() {
//get datas from divs
var maxStat = parseInt($(this).attr("data-bar-max"));
var currentStat = parseInt($(this).attr("data-bar"));
//depend on value change currentstat
currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;
var a = currentStat * (100 / maxStat);
//find statbartext inside div
$(this).find(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
///same find and apply effect there
$(this).find(".stat-bar-main-shade-min").animate({
"width": a + "%"
}, 800);
$(this).find(".stat-bar-main-shade-plus").animate({
"width": a + "%"
}, 300);
$(this).find(".stat-bar-main").animate({
"width": a + "%"
}, 700);
})
}, 2000); // END 2 second interval change
});
.stat-bar {
background-color: #ACB597;
height: 26px;
width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main {
background-color: #464D51;
height: 30px;
width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min {
height: 100%;
width: 100%;
}
.stat-bar-main-shade-plus {
height: 100%;
width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min,
.stat-bar-main-shade-plus {
background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);
opacity: 0.35;
}
.stat-bar-text {
color: rgba(255, 255, 255, 0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>

Can I refresh this page without losing the LI content?

I would like to be able to add an item to the list, and view it when I reload the page. I am not sure how to go about doing this. I do not need it stored in a database or anything, I would just like it to be there on screen until I manually delete the list item. Is this possible?
I believe this would be kept on sharepoint, and used with multiple users adding and editing the content, but when I get to that step, I may need additional help with that as well, if that makes any difference to the current question of keeping the LI information.
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var name = $('#name').val();
$('#name').val("");
var number = $('#number').val();
$('#number').val("");
var exception = $('#exception').val();
$('#exception').val("");
var date = $('#date').val();
$('#date').val("");
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number + " | " + exception + " | " + date + "</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});
body {
font-family: Roboto;
background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
background: -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus {
float: right;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n){
background: #f7f7f7;
}
span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<title>Exceptions</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script type="text/javascript" src="assets/js/lib/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="container">
<h1>2223A Exceptions <i class="fa fa-plus"></i></h1>
<input id="name" type="text" placeholder="Employee Name:">
<input id="number" type="text" placeholder="Employee Number:">
<input id="exception" type="text" placeholder="Employee Exception:">
<input id="date" type="text" placeholder="Employee Date:">
<ul>
<li><span><i class="fa fa-trash"></i></span> #303974 | R. Roberts | SN | 6/25 - 6/27</li>
<li><span><i class="fa fa-trash"></i></span> #303354 | B. Smith | SN | 6/15 & 6/27</li>
<li><span><i class="fa fa-trash"></i></span> #328937 | K. Stull | NO | 6/26</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>

Well written question.
Change
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number + " | " + exception + " | " + date + "</li>")
To
let li = "<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number + " | " + exception + " | " + date + "</li>";
localStorage.setItem('li', localStorage.getItem('li') + li);
$("ul").append(li);
localStorage is an API that allows you to store data in the browser. All I have done here is stored the li as part of a concatenated string of lis. Then place the new li on the page the way you did before.
Now, your next task is the retrieve the lis from localStorage upon page load. So something like this will work:
// assuming document.ready
let lis = localStorage.getItem('li');
$("ul").append(lis);
That should get you very close.
EDIT: I've modified your jsFiddle to accomplish this goal (adding a new item). You can find it here: https://jsfiddle.net/tsbm02hd/

U can indeed use localstorage or you can use JavaScript Cookie manager for this.
Only downside is that the user has some control since he would bve able to clear his browser and therefor his localstorage and/or Cookies...
I still believe for things like this it is best to use an API call and save this data on the server side....

how to add CSS to -webkit-slider-runnable-track using Javascript

I am trying to change the range slider lower color depends upon the slide. Using below code.
<head>
</head>
<input type="range" min="1" max="100" step="1" value="15"id="myrange" class="myrange">
CSS:
input[type="range"] {
width: 100%;
height: 28px;
-webkit-appearance: none;
outline: none;
border: 0; /*for firefox on android*/
padding: 0 8px; /*for IE*/
margin: 8px 0;
}
/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
height: 8px; /*trackHeight*/
border-radius: 4px; /*trackHeight*/
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: orange;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -12px;
cursor: pointer;
border: 4px solid #fff;
transition: 0.3s;
}
javascript:
var style = $("<style>", {type:"text/css"}).appendTo("head");
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
style.text('.myrange::-webkit-slider-runnable-track{background-image:-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', orange), '+ 'color-stop(' + val + ', gray);}');
});
});
I would like to update the CSS for input[type="range"]::-webkit-slider-runnable-track while using the slider.
I have verified the previous post how to call range::-webkit-slider-runnable-track? on same topic and edited my code accordingly. Really appreciate if someone can help me to identify the issue with code
Fiddle : https://jsfiddle.net/fwmscany/1/

This is working now. Here is the update I made to Javascript
$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
});
});

Lottery game, add css class based on numerical range

I'm making a lottery random number generator and have it working, all I want to do is change the background colour of the ball varying on what number range its called between. The second block of code is what I have come up with so far.
For example
o 1-9: White
o 10-19: Blue
o 20-29: Ping,
o 30-39: Green,
o 40-49: Yellow
<!DOCTYPE html>
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>NRONLINE - Buckinghamshire Web Design, Digital Marketing Workshops and Kofax Consultancy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
background: #444;
font-family: sans-serif;
font-size: 18px;
font-weight: 100;
}
ul {
position: absolute;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
list-style-type: none;
width: 690px;
height: 100px;
}
ul li {
float: left;
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 10px;
color: white;
text-align: center;
line-height: 100px;
font-size: 36px;
}
ul li:nth-child(5n) {
margin-right: 40px;
}
.ball-placeholder {
background: #222222;
background: -moz-linear-gradient(-45deg, #222222 0%, black 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #222222), color-stop(100%, black));
background: -webkit-linear-gradient(-45deg, #222222 0%, black 100%);
background: -o-linear-gradient(-45deg, #222222 0%, black 100%);
background: -ms-linear-gradient(-45deg, #222222 0%, black 100%);
background: linear-gradient(135deg, #222222 0%, black 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
}
.next-ball, .play-again {
position: absolute;
right: 0;
left: 0;
margin: auto;
border: 0;
color: white;
}
.next-ball {
bottom: 20px;
width: 100px;
height: 40px;
font-size: 16px;
background: #7ac9ed;
}
.play-again {
display: none;
bottom: 20px;
width: 200px;
height: 80px;
font-size: 24px;
background: #d74d2f;
}
.white-ball {
background: #fff;
color:#101010;
}
.blue-ball {
background: #99ccff;
color:#101010;
}
.pink-ball {
background: #ffccff;
color:#101010;
}
.green-ball {
background: #00cc66;
color:#101010;
}
.yellow-ball {
background: #fac600;
color:#101010;
}
</style>
</head>
<body role="document">
<ul class="ball-placeholders">
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
</ul>
<ul class="lottery"></ul>
<button class="next-ball">Next Ball</button>
<button class="play-again">Play Again!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var arr = new Array();
$('.next-ball').on('click', function(){
//generate random number between 1 and 50
var random = Math.floor(Math.random()*50 ) + 1;
// array to store css class references
var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
console.log(random);
//if index of random number is less than 50
if( arr.indexOf(random) == -1){
//generate random number
arr.push(random);
//add css class to lottery-ball class relevant to array value range
$('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
}
// if the number already exists ignore and generate a new number
else {
console.log(random);
}
console.log(arr);
//if lottery number calls is greater than 5 then switch button classes and send an alert to the user
if ( $('.lottery').children().length > 5 ) {
$('.next-ball').hide();
$('.play-again').show();
alert('Did You Win?');
}
});
//If once the game is finished the user chooses to play again switch button classes
$('.play-again').on('click', function(){
$('.lottery').children().remove();
arr = [];
$('.next-ball').show();
$('.play-again').hide();
});
</script>
</body>
</html>

Your idea should work, but since the only thing that changes is the class of the li it could be more compact. Here I've stored the class names in an array, and used the first digit of the ball number - Math.floor(random/10) to find the right element. Also your indexOf line had a bug - a return of zero from indexOf means the element was found at the start of the array, so check for -1.
var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
if( arr.indexOf(random) == -1){
arr.push(random);
$('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
}

Another alternative could be CSS attribute selectors. We could use the 'starts with' selector ^, which will target all elements whose attribute in question... well, starts with a particular string.
Say we give each li representing a ball a data-* attribute equal to its number. Then we can style their backgrounds like so:
li[data-number^=0] {
/*target numbers less than 10
Need to append 0 in front of numbers <10
for this to work*/
background: white;
}
li[data-number^=1] {
/*target numbers in the teens*/
background: blue;
}
li[data-number^=2] {
/*target numbers in the twenties*/
background:pink;
}
/*...and so on...*/
Then the JS is somewhat simplified to:
if (arr.indexOf(random) == -1) {
arr.push(random);
$('.lottery').append('<li class="lottery-ball" data-number="' + (random < 10 ? '0' : '') + random + '">' + random + '</li>';
}
EDIT: here's a link for other types of attribute selectors.

HTML5/CSS3 Input Range Styling

so I created a style for input range sliders using HTML5/CSS3. All works fine except for the fill percentage in Firefox (the bit that fills up right to the drag-able button). It works in Chrome. I've tried everything can someone maybe assist me to make it work in Firefox as well. Heres what I have:
CSS :
.my-retirement-sliders input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
border:none;
height: 6px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 3px solid #fff;
height: 10px;
width: 10px;
}
.my-retirement-sliders input[type="range"]{
-webkit-appearance: none;
border-radius: 5px;
height: 6px;
background-color: #444;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 3px solid #fff;
border-radius:10px;
height: 15px;
width: 15px;
}
Little-bit of JS:
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
});

So I managed to fix it for Firefox now as well :D Happy DAYS! So my CSS looks like this
/* Firefox */
.my-retirement-sliders input[type='range']::-moz-range-track {
border:none;
background:transparent;
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:10px;
height: 13px;
width: 13px;
box-shadow:black 2px 2px 10px;
}
/* Chrome and Opera */
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 20px;
width: 20px;
box-shadow:black 1px 1px 5px;
}
/* IE */
.k-ie .my-retirement-sliders input[type="range"]{
height:81px;
top:10px;
position:relative;
width:300px;
margin-left: 10px;
display: inline-block;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-track {
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-lower {
background: #94A14E;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-upper {
background: #C5C5C5;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-thumb {
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 15px;
width: 15px;
box-shadow:black 1px 1px 5px;
overflow:auto;
}
AND JS LOOKS LIKE THIS :
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderRetAge").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val*100 + '% , #C5C5C5 ' + val*100 + '%)');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderPostRetExpPerc").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$(this).css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
});