JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.theme.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<div class="slider"></div>
<div class="output"></div>
<div class="value"></div>


<div class="slider2"></div>
<div class="output2"></div>
<div class="value2"></div>

CSS

body{padding: 2em;}
.ui-slider{margin: 1em 0;}

JavaScript

$(".slider").slider({ 

    min: 0, value: 42, max: 50, step: 3, 

    create:function(e,ui){
        $(".output").text( $(".slider .ui-slider-handle").attr("style") );
        $(".value").text( ui.value );
    }
})
.on("slidechange", function(e,ui) {
    $(".output").text( $(".slider .ui-slider-handle").attr("style") );
    $(".value").text( ui.value );
});


$(".slider2").slider({ 

    min: 0, value: 42, max: 46, step: 3,

    create:function(e,ui){
        $(".output2").text( $(".slider2 .ui-slider-handle").attr("style") );
        $(".value2").text( ui.value );
    }
})
.on("slidechange", function(e,ui) {
    $(".output2").text( $(".slider2 .ui-slider-handle").attr("style") );
    $(".value2").text( ui.value );
})