JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="slider"></div>
<br><br>
<button id="vertical">vertical</button>
<button id="horizontal">horizontal</button>

CSS

1. Change orientation to vertical. Everything is ok. Change it back to horizontal.
1. Drag the handle to the middle of the track.
2. Set orientation to vertical
3. Now range doesn't fill all space. If you change back orientation  to horizontal, range will also fill only half vertical space.
4. This case also works for simple and min range.

JavaScript

var $slider = $( "#slider" ).slider({
        range: "max"
    });

$( "#vertical" ).click( function() {
    $slider.slider( "option", "orientation", "vertical" );
});

$( "#horizontal" ).click( function() {
    $slider.slider( "option", "orientation", "horizontal" );
});