gabe,
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/Jonson/pen/MawGER" />
<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'>
<script src='//codepen.io/assets/libs/prefixfree.min.js'></script>
<style class="cp-pen-styles">.sliderPrice {
width: 500px;
margin-top: 50px;
margin-left: 50px;
}
.fa-user {
position: absolute;
top: 21px;
right: 120px;
}
.mount {
font: 400 18px Arial;
background: none;
border: 0;
text-align: left;
position: absolute;
top: 17px;
left: 0px;
}
.ui-slider {
position: relative;
text-align: center;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.ui-slider-horizontal {
height: .3em;
background: blue;
border-radius: 15px;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.4em;
margin-left: -0.6em;
background: #3333ff;
border-radius: 50%;
}
.ui-slider-horizontal .ui-slider-range-min {
height: 100%;
left: 0;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-state-hover {
background: blue;
}
.ui-state-active {
width: 25px !important;
height: 25px !important;
top: -0.6em !important;
border: 0;
outline: none;
}
p {
margin: 100px;
}
</style></head><body>
<section class="sliderPrice">
<i class="fa fa-user"></i>
<label for="amount"></label>
<input type="text" id="amount" class="mount" readonly>
</section>
<p></p>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script>
$(".sliderPrice").slider({
value: 0,
min: 0,
max: 1e4,
step: 1,
slide: function(e, i) {
for (var l = i.value, a = [
[100, 1],
[400, .8],
[500, .6],
[4000, .4],
[4999, .2],
[1, .1]
], r = 0, n = 0; n < a.length; n++) {
if (l -= a[n][0], !(l > 0)) {
r += (a[n][0] + l) * a[n][1];
break
}
r += a[n][0] * a[n][1]
}
$(".mount").val(i.value + " - $" + r.toFixed(2))
}
});
$('.mount').val('0' + ' - ' + '$' + $('.sliderPrice').slider('value'));
</script>
</body></html>