CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
codecowboy
codecowboy

Reputation: 10095

How can I move the jQuery mobile slider control's input field?

I'm trying to move the input field for jQuery mobile's slider to the right of the control rather then the left (default). I also want to include increase and decrease buttons at either side of the slider control. All of this should appear inline i.e in one div spanning the width of the display.

I'm doing the following to detach and append the input field:

var inputField = $('input#slider-1').detach();
inputField.appendTo('#more');

But the slider control gets squashed to the point of being unusable. Full code here or here

How can I override the width of the slider without using fixed pixel values?

Upvotes: 1

Views: 1475

Answers (2)

yeyene
yeyene

Reputation: 7380

Check this update DEMO http://jsfiddle.net/yeyene/Bq2dn/99/

I added the scripts to move the slider handler according to Increase/ Decrease buttons.

$('#increase').live('tap',function(e){
    var slider = $("#slider-1");
    value = parseInt(slider.val(),10);            
    slider.val(value+1);
    slider.slider('refresh');
    slider.attr('style', 'left:'+(value+1)+'%;');
});

$('#decrease').live('tap',function(e){
    var slider = $("#slider-1");
    value = parseInt(slider.val(),10);
    slider.val(value-1);
    slider.slider('refresh');         
    slider.attr('style', 'left:'+(value-1)+'%;');
});

$('#control div.ui-slider').insertBefore('#slider-1');

Upvotes: 1

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

The main point at positioning the input at the right side is selecting the slider properly 

$('#control div.ui-slider').insertBefore('#slider-1');

For overriding the width of the slider, you can just use a percentage value 

#less { float:left; }
#control { float:left; width: 50%; }
#more { float:left; }

Modified JSFiddle

Additionally, you can remove #inner-div and #test. It will still work without these.

Upvotes: 2

Related Questions