JQuery UI nonlinear slider - jquery-ui

Question

I need a slider to let the user select a weight.
$( "#slider" ).slider({
value: 15,
slide: function( event, ui ) {
$('#weight').text(ui.value);
}
});
But the values should be nonlinear: That means a 'normal' behaviour for values from 10 to 50 (increasing steps of 1).
Then for example: If the values are getting bigger they should increase in steps of 10. If the user selects lower values it should be more precise: values 3 to 10 (increasing steps of 0.5), below 3 -> increasing steps 0.1.
My attempt would be to use an own array for the data:
myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ];
$( "#slider" ).slider({
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
$('#weight').text(ui.value);
},
create: function() {
$(this).slider('values',0,0);
$(this).slider('values',1,myData.length - 1);
}
});
But this doesn't work. Is there a smarter solution?

Answer 1

myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ];
$( "#slider" ).slider({
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
$('#weight).text(myData[ui.value]);
}
});