<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="main">
  <div id="storlekslider"></div>
  <button class="btn-range" data-dir="minus">-</button>
  <input type="text" name="storlek" id="storlek_testet" /><button class="btn-range" data-dir="plus">+</button>
</div>

body {
  background: #ffd49f;
}
.main {
  width: 600px;
  margin: 0 auto;
}
#storlekslider { margin: 10px; }
.ui-slider-handle{
    width: 35px !important;
    font-size: small !important;
    color: #4082f9 !important;
    text-align: center !important;
}

    $( "#storlekslider" ).slider({
    range: "max",
    min: 0,
    max: 150,
    step: 1,
    value: 0,
    slide: function( event, ui ) {
    //var value1 = $("#storlekslider").slider("value");  
    $("#storlek_testet").val( ui.value );
    $(ui.value).val($('#storlek_testet').val());
    var value1 = $("#storlek_testet").val();
    $("#storlekslider").find(".ui-slider-handle").text(value1);  
    }
    });

$("#storlek_testet").keyup(function() {
    $("#storlekslider").slider("value" , $(this).val());
  var value1 = $("#storlek_testet").val();
    $("#storlekslider").find(".ui-slider-handle").text(value1);
});

$('.btn-range').click(function() {
  var direction = $(this).data("dir");
  var value =  $("#storlekslider").slider("value");
  if (direction == "plus") {
     $("#storlekslider").slider("value", value+50);
  } else {
    $("#storlekslider").slider("value", value-50);
  }
  var currentVal = $("#storlekslider").slider("value");
  $("#storlek_testet").val(currentVal);
  $("#storlekslider").find(".ui-slider-handle").text(currentVal);
});