JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">

<div id="slider"></div>

</div><!-- End demo --> 
<div class="border-box-1">
    <div>something
<div class="border-box-2">
    <div>something
<div class="border-box-3">
    <p> some border box content </p>
</div></div>
</div></div>
</div>

CSS

div {
    width:100%;
}
.border-box-1, .border-box-2, .border-box-3 {
    background-color:rgba(0,0,0,0.1);
    width:100%;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:3px solid black;
    padding:5%;
}
.ui-widget-content {
border: 1px solid #DDD;
background: #EEE url(../images/?new=eeeeee&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|100) 50% top repeat-x;
color: #333;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-state-default, .ui-widget-content .ui-state-default {
border: 1px solid #CCC;
background: #F6F6F6 url(../images/?new=f6f6f6&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|100) 50% 50% repeat-x;
font-weight: bold;
color: #1C94C4;
outline: none;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}.ui-corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
div.demo {
    padding: 10px !important;
}

JavaScript

$(function() {
        $( "#slider" ).slider({
            min:0,
            max:10,
            value:0,
            step:0.01,                
            slide: function(event, ui) { 
                thisVal = ui.value;
                console.log(thisVal);
               $('.border-box-2').css({'padding': thisVal+'em'});
            }
        });
    });