I'm not very familiar with JavaScript programming, so I'm feeling a bit lost while trying to understand the code in the jQuery Mobile library (the lack of comments doesn't help). I managed to create a colorpicker slider using jQuery UI, you can view the demo here - Now, I'm seeking assistance in transitioning my code to use jQuery Mobile instead, or any advice on where to get started.
I've noticed that they use a different approach for manipulating elements, so I attempted to adjust them, for example:
domSlider.setAttribute( "id", "slider-horiz" );
domSlider.setAttribute( "role", "application" );
I'm unsure about how to integrate the necessary functions into the slider itself, in jQuery UI I was able to do it in my HTML document (as shown in the demo):
$(function() {
var box = $('#box')[0];
$("#slider-horiz").slider({
orientation: "horizontal",
min: 0,
max: 360,
value: 0,
slide: function(event, ui) {
box.style.background = 'hsl(' + ui.value + ', 100%, 50%)';
var clr = $('#box').css('background-color');
$('#box').attr('data-color', clr).trigger('click');
$('#slider-handle').css('background-color', clr);
if (ui.value == 0) {
$('#box').attr('data-color', 'hsl(' + ui.value + ', 0%, 0%)').trigger('click');
$('#slider-handle').css('background-color', '#000');
}
if (ui.value == 360) {
$('#box').attr('data-color', 'hsl(' + ui.value + ', 100%, 100%)').trigger('click');
$('#slider-handle').css('background-color', '#fff');
}
}
});
});