hfts_rider,
Вариант на 98%
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)
}
.ui-widget-header {
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #FF1493, #0060BF);
background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
background-image: linear-gradient(to right, #FF1493, #0060BF)
}
.ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
.ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
:focus {
outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
border: 0;
}
</style>
</head>
<body>
<div class="slider-range range-uah"></div>
<div class="result-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
var len = 98 *30;
$( ".range-uah" ).slider({
range: "min",
value: 0,
step: 30,
min: 0,
max: len * 2,
slide: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).html(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).html(50000 + 5000*Math.floor((res-len)/98));
}
},
change: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).html(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).html(50000 + 5000*Math.floor((res-len)/98));
}
}
});
$( ".range-uah" ).slider("option", "value" , len);
});
</script>
</body>
</html>