JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div id="confirmDlg">
    <div>
        <input type="text" class="text"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div id="slider"></div>
    </div>
    

</div>

CSS

#confirmDlg > div {
    position:relative;
    height:100px;
    width:400px;
    overflow:auto;
    padding: 4px;
    border: solid 1px #ccc;
}
a.ui-slider-handle {
    background: #F6F6F6;
    border: 1px solid #CCCCCC;
    color: #1C94C4;
    font-weight: bold;
    outline: medium none;
    margin-left: -0.6em;
    top: -0.3em;
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}
.ui-slider {
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #333333;
    font-size: 1.1em;
    height: 0.8em;
    position: relative;
    text-align: left;
}

JavaScript

$(function() {
    $("#confirmDlg").draggable({cancel: '.ui-slider-handle, .text'});
    $("#slider").slider();
});