How to ignore step and set exact amount on jquery slider

Question

I have a number of questions regarding jQuery Sliders.

I have the following jsfiddle to help explain. Fiddle

$("#slider").slider({
  range: 'min',
  value: 5000,
  min: 5000,
  max: 1000000,
  step: 5000,
  slide: function(event, ui) {
    $("#value").html($("#slider").slider("value") + ' years');
    $("#value").css("margin-left", (ui.value - 5000) / (1000000 - 500) * 80 + "%");
    $("#value").css("left", "-50px");
  }
});

$("#value").html($("#slider").slider("value") + ' years');
$("#value").css("margin-left", (5000 - 5000) / (1000000 - 5000) * 80 + "%");
$("#value").css("left", "-50px");

$('#set-value').click(function() {
  $("#slider").slider("value", 171098);
  $("#value").html($("#slider").slider("value") + ' years');
  $("#value").css("margin-left", ($("#slider").slider("value") - 5000) / (1000000 - 5000) * 80 + "%");
});

.form-group {
  width: 80%;
  margin: 0px auto;
}

#slider {
  margin-bottom: 20px;
  margin-top: 20px;
}

#value {
  background: #CC99CC;
  color: white;
  font-weight: bold;
  margin-top: 10px;
  padding: 0.5em;
  text-align: center;
  width: 6em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div class="form-group">
  <div id="slider"></div>
  <div id="value"></div>
</div>

<button id="set-value">Set</button>

1. I'm seeing is that if you use the slider and move it to either end (min or max) it appears to display a value which is the step value greater than min or less than max.
   
   The question is: why doesn't the slider allow me to move to the minimum or maximum positions?

2. The question is represented by the Set button in the jsfiddle. In reality we have some JavaScript which comes up with an amount here for here we're simply setting a fixed value. However the slider snaps to the nearest step point.
   
   The question is: Is there a way to ignore the steps when you have a specific amount? The range is quite large so the steps are handy for slider use but I'd still like to be able to set the exact amount when I use the set button.

Thanks in advance.

Answer 1

About the first question:

Replace $("#slider").slider("value") with ui.value.

About the second question:

You can do kind of "patch". When you click on the button, set the step property to 1. When the user start dragging the slider, turn it to 5000 again.

You can see the both of the answers in the snippet below.

$("#slider").slider({
  range: 'min',
  value: 5000,
  min: 5000,
  max: 1000000,
  step: 5000,
  slide: function(event, ui) {
    $("#value").html(ui.value + ' years');
    $("#value").css("margin-left", (ui.value - 5000) / (1000000 - 500) * 80 + "%");
    $("#value").css("left", "-50px");
  },
  start: function( event, ui ) {
    $(this).slider( "option", "step", 5000);
  }
});

$("#value").html($("#slider").slider("value") + ' years');
$("#value").css("margin-left", (5000 - 5000) / (1000000 - 5000) * 80 + "%");
$("#value").css("left", "-50px");

$('#set-value').click(function() {
  $("#slider").slider( "option", "step", 1).slider("value", 171098);
  $("#value").html($("#slider").slider("value") + ' years');
  $("#value").css("margin-left", ($("#slider").slider("value") - 5000) / (1000000 - 5000) * 80 + "%");
});

.form-group {
  width: 80%;
  margin: 0px auto;
}

#slider {
  margin-bottom: 20px;
  margin-top: 20px;
}

#value {
  background: #CC99CC;
  color: white;
  font-weight: bold;
  margin-top: 10px;
  padding: 0.5em;
  text-align: center;
  width: 6em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div class="form-group">
  <div id="slider"></div>
  <div id="value"></div>
</div>

<button id="set-value">Set</button>

Answer 2

Using ui.value in the event handlers is the crux of getting the proper inputs.

...
slide: function(event, ui) {
    $value.text(ui.value + ' years');
....

Check out this fiddle that also shows how to can better position your moving value element.

Slider with value centered under slider handle