CODEWITHSUNDEEP
jqueryjquery-mobileslider
dolphone bubleine
dolphone bubleine

Reputation: 691

How to set the width of a jquery mobile slider

myScroller.scoller("refresh", {width:5}); would be fantastic

Here's what I've got. This works pretty good (a little off but screw it). The problem is the little slider ball thinks it has the entire original width so it slides off the bar.

$.each($(":jqmData(role=fieldcontain) > div[class~='ui-slider']"), function () {
    var slider = $(this);
    slider.css("width", (slider.width() - 16) + "px !important");
});

Upvotes: 1

Views: 4779

Answers (1)

Jasper
Jasper

Reputation: 76003

You can just select the slider widgets and set their widths without a loop:

//set all slider widgets to 250px wide
$('.ui-slider').width(250);

//set all slider widgets to 50% wide
$('.ui-slider').width('50%');

//set all slider widgets to 25px less than their current width
$('.ui-slider').width(function (i, old_width) {
    return old_width - 25;
});

I would place this code in a pageinit handler like so:

$(document).on('pageinit', '.ui-page', function () {
    $(this).find('.ui-slider').width(250);
});

Upvotes: 9

Related Questions