jQuery Slider limit with min / max from 0 to 100

Question

Default jQuery slider 0 to 100, I need to limit from 20% to 50% only. With only 1 handle (not 2)

js:

$('div').slider({
    //range: 'max',
    step: 1,
    min: 20,
    max: 50,
    slide: function(event, ui){
        console.log(ui.value);
    }
});

This is a picture of what I need:

Answer 1

You can test a current value of slider in the function provided as slide property. If the value is too low or high, just return false to abort process.

var sliderMin = 20,
    sliderMax = 50;

$('#slider').slider({
    step: 1,
    min: 0,
    max: 100,
    value: sliderMin,
    slide: function( event, ui ) {
      var amount = ui.value;
      if (amount < sliderMin || amount > sliderMax) {
        return false;
      } else {
        $("#amount").val(amount);
      }
    }
});

$("#amount").val(sliderMin);

You can test it in this jsFiddle.