JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://elder-scrolls-online.eu/datenbank/ajmanager/ajaxmanager.js"></script>
<p>
<label class="item-slider" for="amount">Stufe:</label>
<input class="item-slider" readonly id="amount">/
<input class="item-slider" readonly id="amount2" value="50">
</p>
<div id="slider-vertical" style="height:10px;"></div>
CSS
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
width: 100%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header {
border: 1px solid #444 !important;
background: none !important;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
background-color: #353232;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
background-color: #817373!important;
}
JavaScript
jQuery(function ($) {
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: 'clear',
cacheResponse: true,
preventDoubleRequests: true,
abortOld: true
});
// Slider Script
$("#slider-vertical").slider({
orientation: "horizontal",
range: "min",
min: 1,
max: 50,
value: 50,
slide: function (event, ui) {
$("#amount").val(ui.value);
},
});
$("#amount").val($("#slider-vertical").slider("value"));
// Get Response
$('#slider-vertical').on('slide', getResponse);
// this won't work: getResponse(0);
function getResponse(e, ui) {
//let itemlevel2 = $("#slider-vertical").slider("value");
let itemlevel2 = ui.value;
console.log(itemlevel2)
ajaxManager.add({
type: "GET",
cache: "true",
url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
data: {
"itemlevel": itemlevel2
},
success: function (data) {
}
});
}
});