This example shows how to combine three Telerik Slider UI components to create a simple RGB colorpicker.
OnSlide and OnChange client event of the three sliders is wired to the onRedSliderEvent, onGreenSliderEvent and onBlueSliderEvent event handlers.
var red = 204,
green = 255,
blue = 50;
function onRedSliderEvent (e) {
red = e.value;
changeBackgroundColor(red, green, blue)
}
function onGreenSliderEvent (e) {
green = e.value;
changeBackgroundColor(red, green, blue)
}
function onBlueSliderEvent (e) {
var blue = e.value;
changeBackgroundColor(red, green, blue)
}
function changeBackgroundColor(red, green, blue) {
var color = "rgb(" + red + ", " + green + ", " + blue + ")";
$("#colorBox").css("background-color", color);
}
In it, you can see how the values are retrieved and the background-color of the DIV element is set.