jquery slider step increment in 10s but min value 1 - jquery-ui

Question

I have an issue where I want the steps to increment by 10 starting from 1 to a max of 1000.
The problem is that if the value is 1, the next values are 11 then 21 etc. How could this be changed so that it goes from 1, 10, 20, 30 etc, so the first step is 9, then 10 afterwards.
Sometimes the value can go to 1001 as well, I figured that if you slide to the max value quickly it'll stop at 1000, but if you stop at 991, it'll go over 1000 if you take the last step.
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>
$("#slider-range-min").slider({
range: "min",
value: 1000,
min: 1,
step: 10,
max: 1000,
slide: function (event, ui) {
$("#amount").val("$" + ui.value);
}
});
$("#amount").val("$" + $("#slider-range-min").slider("value"));
http://jsfiddle.net/zwTnY/

Answer 1

Change the range from 1-1000 to 0-1000 and add a check when sliding or stopping to see if the value is zero. If so, change it to 1.
jsFiddle example
$("#slider-range-min").slider({
range: "min",
value: 500,
min: 0,
step: 10,
max: 1000,
slide: function (event, ui) {
$("#amount").val("$" + ui.value);
if (ui.value == 0) {
$("#slider-range-min").slider('value', 1);
$("#amount").val('$1');
}
},
stop: function (event, ui) {
if (ui.value == 0) {
$("#slider-range-min").slider('value', 1);
$("#amount").val('$1');
}
}
});
$("#amount").val("$" + $("#slider-range-min").slider("value"));