JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<script src="http://zorgkeuzelab.nl/js/jquery.nouislider-edit.js"></script>
<div id="slider1"></div>

JavaScript

var sl = $("#slider1");

sl.noUiSlider({
    start: 50,
    range: [0, 100],
    handles: 1,
    connect: "upper",
    serialization: {
        to: []
    }
});

// @LeonGersen,
// zie lijn 428 van jquery.nouislider-edit.js
// Het werkte goed bij de sliders die ik nodig heb.
// Het is niet een hele nette oplossing omdat andere slidertypen
// hier ook door beinvloed worden.
// Het liefst zou ik in de config als startpunt het midden meegeven ipv links of rechts.
// maar daar ontbreken mij de JS skills voor :-)
// Bedankt voor je suggestie met de CSS oplossing!