Home/ Questions/Q 7790337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T21:33:11+00:00

I have a simple jquery mobile site that includes a few buttons and a

  • 0

I have a simple jquery mobile site that includes a few buttons and a slider. The buttons stretch out to fill the whole horizontal space, but the slider does not. It feels very clunky. Is there any way to coax a jquery-mobile slider to fill the whole horizontal space?

<div data-role="page">
    <div data-role="header">
        <h1>header</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="content" data-position="fixed" data-theme="a">
        <form>
           <input type="range" name="slider" id="slider-0" value="50" min="0" max="100"/>
        </form>
       <a id="button-1" href="#" data-role="button">Button</a>
       <a id="button-2" href="#" data-role="button">Button</a>
    </div>
</div>

Side note: this code includes two divs with data-role=”content”. Is that going to get me into trouble? jquery-mobile doesn’t like to put sliders into footers, but I need the slider to act like a footer with fixed position at the bottom of the display area.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are targeting a consistent screen size this would be pretty easy. By default in JQM 1.1RC2 I see them using 65% for the slider bar. The input field before the slider however is fixed at 50px. Try playing with .ui-slider width to get a closer value just be careful because it will look different depending on the screen size.

    div.ui-slider{width:80%;}

    Maybe something like 80% will work better for you. As for your second part I have no idea test it out and let us know.

    • 0