JSFiddle - React, Tailwind, and code Playground

by axtruo

HTML

<!---code that i use --->
    <input type="text" id="location-offsetX-slider" name="general-slider" class="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="1" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="square">
        
        <!-- Code that browser render -->

<div style="width: 220px;" class="slider slider-horizontal">
    <div class="slider-track">
        <div style="left: 0%; width: 50%;" class="slider-selection"></div>
        <div style="left: 50%;" class="slider-handle"></div>
        <div style="left: 0%;" class="slider-handle hide"></div>
    </div>
    <div style="top: -24px; left: 94.5px;" class="tooltip top">
         <div class="tooltip-arrow"></div>
         <div class="tooltip-inner">50</div>
    </div>
    <input style="" id="location-offsetX-slider" name="general-slider" class="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="1" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="square" type="text">

    </div>
    
<!---  change happen in Code when i drag slider 50% -->
    
    
        <div style="left: 0%; width: 50%;" class="slider-selection"></div>
        <div style="left: 50%;" class="slider-handle"></div>