I'm using the Omega Framework to implement a financial calculator that I'd like to be able to support across different device platforms (desktop, tablet, mobile), but I'd like the input fields to have sliders so users can just adjust the input values up and down. I'm also using the Drupal Form API to generate the input form.
I've been using the jQuery Slider plugin to support this on desktop devices and it works great but, the sliders don't work on tablets and iPads. Because Form API doesn't directly support sliders, I've used jQuery and Javascript to implement them for desktop devices using the following code:
// Listen for events
$('#a01price-wrap').hover(a01price_input_enter); {}
$('#edit-a01price').change(a01price_input_change); {}
$('#a01price-wrap').mouseleave(a01price_input_leave); {}
$('#a01price-wrap').focusout(a01price_input_leave); {}
// On hover event, display slider, set attributes and call calculation function.
function a01price_input_enter() {
$('#a01price-error').text('');
$('#a01price-slide').slider({
range: 'max',
min: 0,
max: 60000,
step: 100,
value: $.formatNumber($('#edit-a01price').val(), null),
slide: function( event, ui ) {
$('#edit-a01price').val($.formatNumber(ui.value, '#,000.##'));
$('#a01price-error').text(''),
a01_interact()
}
});
}
// On change, validate data, display error messages or sync slider/field values and call calculation function.
function a01price_input_change () {
if (isNaN(document.getElementById('edit-a01price')||{}).value || (document.getElementById('edit-a01price')||{}).value < 0) {
$('#edit-a01price').val(0);
$('#a01price-error').text('Invalid purchase price');
$('#a01price-slide').slider({value: $('#edit-a01price').val()});
$('#a01price-slide').slider("destroy");
a01_interact();
return;
}
else
{
$('#a01price-error').text('');
$('#a01price-slide').slider({value: $.formatNumber($('#edit-a01price').val(), null)});
$('#edit-a01price').val($.formatNumber($('#edit-a01price').val(), '#,000.##'));
a01_interact();
}
}I'm guessing I need to move to jQuery Mobile to support sliders for these devices, but because the Form API doesn't support a type="range", it looks like I'm going to have to use a similar jQuery method for associating a slider with each input field. I've tried just loading jQuery Mobile along with the page, but the code I'm using doesn't look to be compatible. Is there a different approach I should be taking here, or how can I tweak my existing code to work with jQuery Mobile?