JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxSlider" style="width: 250px; height: 40px;"></div>
<div id="jqxButton">Click</div>
<div id="log"></div>
JavaScript
/**
* Erweiterung für die Math Klasse von JavaScript um Rundungen
* auf Dezimalstellen zuzulassen, ohne wie Number.toFixed(n) einen
* String zu erzeugen.
* Basis:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
* Global_Objects/Math/round#Example:_Decimal_rounding
*/
(function() {
/**
* Decimal adjustment of a number.
*
* @param {String} type The type of adjustment.
* @param {Number} value The number.
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
* @returns {Number} The adjusted value.
*/
function decimalAdjust(type, value, exp) {
// If the exp is undefined or zero...
if (typeof exp === 'undefined' || +exp === 0) {
return Math[type](value);
}
value = +value;
exp = +exp;
// If the value is not a number or the exp is not an integer...
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
return NaN;
}
// Shift
value = value.toString().split('e');
value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
// Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
}
// Decimal round
if (!Math.round10) {
Math.round10 = function(value, exp) {
return decimalAdjust('round', value, exp);
};
}
// Decimal floor
if (!Math.floor10) {
Math.floor10 = function(value, exp) {
return decimalAdjust('floor', value, exp);
};
}
// Decimal ceil
if (!Math.ceil10) {
Math.ceil10 = function(value, exp) {
return decimalAdjust('ceil', value, exp);
};
}
})();
/****************************************************************************/
function renderSlider(options){
$(options.anchor).jqxSlider({
orientation: options.orientation,
showButtons: false,
height: $(options.anchor).height(),
width: $(options.anchor).width(),
min: options.minValue,
max:...