jQWidgets Mobile Demos

Show Demo List

<!DOCTYPE html>

<head>

<title id='Description'>JavaScript Slider - Mobile Example

</title>

$(document).ready(function () {

var theme = prepareSimulator("slider");

$('#redLevel').jqxSlider({ theme: theme, width: "94%", showButtons: false, sliderButtonSize: 20, min: 0, max: 255, ticksFrequency: 25.5, value: 120, step: 25.5 });

$('#greenLevel').jqxSlider({ theme: theme, width: "94%", showButtons: false, sliderButtonSize: 20, min: 0, max: 255, ticksFrequency: 25.5, value: 140, step: 25.5 });

$('#blueLevel').jqxSlider({ theme: theme, width: "94%", showButtons: false, sliderButtonSize: 20, min: 0, max: 255, ticksFrequency: 25.5, value: 255, step: 25.5 });

$('#redLevel').on('change', function (event) {

setColor();

});

$('#greenLevel').on('change', function (event) {

setColor();

});

$('#blueLevel').on('change', function (event) {

setColor();

});

setColor();

initSimulator("slider");

});

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>

.colorBlock {

border: 1px solid #aaa;

width: 100%;

height: 200px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

margin-top: 50px;

}

.colorLabel {

padding: 6px;

}

</style>

<body>

</div>

<div style="font-size: 16px; margin-bottom: 5px; margin-top: 20px; font-style: italic;">Green</div>

</div>

</div>

</div>

</body>

</html>

jQWidgets Mobile Demos

Web UI Widgets