jQuery UI Slider adding step from other function

I have a basic jQuery UI Slider as below which has one control to increase the range

<button id='increase' type="button">+</button>

<script>
    var s = $("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 200,
    value: 10,
    slide: function (event, ui) {
      $("#result").val(ui.value);
    }
});

$('#increase').click(function () {
  var step = 20;
  s.slider('value', s.slider('value') + s.slider("option", "step"));
});
</script>

What I would like to do is to keep the original .slider() function without step option (to have smooth scroll function) but add step to increase button click. I added the var step = 20; to the code but it is not adding the property to the slider. How can I fix this?

Demo

Can you try:

$('#slider-vertical').val(step);
$('#slider-vertical').slider('refresh');

and be sure your code is in $(function() { });

do you use <input type="range" or <div> ?

also im not sure the var s is equal to the jquery element, try replace

var s = $("#slider-vertical").slider({

to

var s = $("#slider-vertical");
s.slider({