html5 css3 range,javascript - HTML5/CSS3 Input Range Styling - Stack Overflow

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 + '%)');

});