JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<form action="" method= "POST"> 
<div class="slider">
<a class="ui-slider-handle" href="#">
<div id="slider-result">0</div>
</a>
 
<input id="znch" name="znch" type="hidden" />
</div>
<input type= "submit" value= "Отправить"> 
</form>

CSS

.slider {
width:230px;
height:11px;
background:#eee;
position:relative;
margin:0 auto;
padding:0 10px;
}
 
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:#fc0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
 
.ui-widget-header {
background:#f00;
height:8px;
left:1px;
top:1px;
position:absolute;
}
#slider-result {
text-align:center;
position:absolute;
top:27px;
left:-8px;
background:#eee;
color:#000;
font: 16px sans-serif;
padding:5px 0;
width:40px;
}

JavaScript

$(document).ready(function(){
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 1,
max: 100,
step: 1,
 
slide: function( event, ui ) {
$( "#slider-result" ).html(ui.value);
},
 
change: function(event, ui) {
$('#znch').attr('value', ui.value);
}
 
});
});