jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
137 lines (129 loc) • 6.48 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Slider, Slider Widget, RangeSlider" />
<meta name="description" content="jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders." />
<title id='Description'>jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$('#redLevel').jqxSlider({
showTickLabels: true, tooltip: true, mode: "fixed", height: 60, min: 0, max: 255, ticksFrequency: 25.5, value: 0, step: 25.5,
tickLabelFormatFunction: function (value)
{
if (value == 0) return value;
if (value == 255) return value;
return "";
}
});
$('#greenLevel').jqxSlider({
showTickLabels: true, tooltip: true, mode: "fixed", height: 60, min: 0, max: 255, ticksFrequency: 25.5, value: 0, step: 25.5,
tickLabelFormatFunction: function (value)
{
if (value == 0) return value;
if (value == 255) return value;
return "";
}
});
$('#blueLevel').jqxSlider({
showTickLabels: true, tooltip: true, mode: "fixed", height: 60, min: 0, max: 255, ticksFrequency: 25.5, value: 255, step: 25.5,
tickLabelFormatFunction: function (value)
{
if (value == 0) return value;
if (value == 255) return value;
return "";
}
});
$('#redLevel').on('change', function (event) {
setColor();
});
$('#greenLevel').on('change', function (event) {
setColor();
});
$('#blueLevel').on('change', function (event) {
setColor();
});
setColor();
$('#jqxcheckbox').jqxCheckBox({ checked: false, width: 200});
$('#jqxcheckbox').on('change', function (event) {
var checked = event.args.checked;
var value = 'default';
if (!checked) {
value = 'fixed';
}
$('#redLevel').jqxSlider({ mode: value });
$('#greenLevel').jqxSlider({ mode: value });
$('#blueLevel').jqxSlider({ mode: value });
});
});
function setColor() {
var red = fixHex(Math.round($('#redLevel').jqxSlider('value')).toString(16)),
green = fixHex(Math.round($('#greenLevel').jqxSlider('value')).toString(16)),
blue = fixHex(Math.round($('#blueLevel').jqxSlider('value')).toString(16));
$('#colorBlock').css('background-color', '#' + red + green + blue);
$('#colorLabel').text(('#' + red + green + blue).toUpperCase());
var color = getTextElement({ r: parseInt(red, 16), g: parseInt(green, 16), b: parseInt(blue, 16) });
$('#colorLabel').css('color', color);
}
function fixHex(hex) {
return (hex.length < 2) ? '0' + hex : hex;
}
function getTextElement(color) {
var nThreshold = 105;
var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
return foreColor;
}
</script>
<style type="text/css">
.colorBlock
{
border: 1px solid #aaa;
width: 200px;
height: 200px;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.colorLabel
{
padding: 6px;
}
</style>
</head>
<body class='default'>
<div style="width: 550px">
<div style="height: 180px;">
<div style="float: left">
<span style="font-style: italic;">Red</span>
<div id='redLevel'>
</div>
<span style="font-style: italic;">Green</span>
<div id='greenLevel'>
</div>
<span style="font-style: italic;">Blue</span>
<div id='blueLevel'>
</div>
</div>
<div class="colorBlock jqx-rc-all" id="colorBlock">
<div class="colorLabel" id="colorLabel">
</div>
</div>
</div>
<div id="jqxcheckbox">Smooth Thumb Drag</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>