<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="main">
  <div id="storlekslider"></div>
  <input type="text" name="storlek" id="storlek_testet" />
</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);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js