Skip to content

Slider fill the whole width? #5045

ghost opened this Issue Sep 21, 2012 · 18 comments

4 participants

ghost commented Sep 21, 2012

Is it possible to have a slider to fill the whole width of a page instead of leaving some dead space to the right?

If not, could this be added as feature?

Phones have a small screen so I would like to use the whole width.

At the moment in landscape mode on my iPhone there is a 30% dead space to the right the slider could fill up to give a better sliding experience.


Hi Wingy,

This is something you have control over with CSS and quite rightly should have control over. If you want the slider to take up more space you can change/override the width property in the rule of
div.ui-slider which has a default width of 65%. Due to the fact that in the example the number input to the left of the slider widget has a fixed size of 50px the leftover 35% seems bigger when you extend the width of the document by rotating orientation to landscape.
However I do agree that it would be better if by default the slider widget itself were totally fluid and would grow according to how much additional space there is available.



@robschmuecker or @uGoMobi - this might be a good thing to add to the docs as a demo. Accessibly hide the input (or place it on another line) and add CSS overrides to make the slide full width.

I don't see us doing anything else to support this out of the box.


Here is a fiddle with full width sliders without input:


@MauriceG - these look really great. I like the tooltips too. Wonder if we could style the input so we can use it to display permament feedback of the value after the label's :

ghost commented Sep 26, 2012

@MauriceG Looks awesome except that you can't input a number with the keyboard.

Or else I would have used that one instead!



Thank you! -- I think to display the sliders value inside the label I need to use scripting.


Here is a version with inputs:



MauriceG - Using CSS, have the input be on the same line as the label (inline block), then style away the bg and border.


@toddparker -- We'll get that nasty spin buttons on desktop webkit browsers. I'll take a look ...


True, it won't be perfect but maybe we can use webkit-appearance to remedy that


@toddparker -- hold on ...


Hi All,

Great looking work @MauriceG ! They look great with the tooltips ;)
I have made a JSBin with the amendment to the JS (overriding the slider create method) to wrap the input and the slider which allows the slider to be "greedy" and take up all remaining space by default.

This however is somewhat floored when it comes to "hiding" the input as then one would have to manually override some of the CSS due to a margin-left:80px; now having been added to the slider to allow the "greediness" to occur as the "input" has been made as a float:left;.

Let me know what you think.



Hi @robschmuecker

cool ! 👍


Nice work on this, cool demos. My opinion is that we should always recommend that the input be there to serve as feedback at the very least so that latest fiddle from MauriceG is a nice demo. The tooltip from the title is a really neat technique, even if it's not widely supported. MauriceG - why is there a tooltip above and value below in that example? Could both of those be nixed now that we style the input as feedback? That would reduce the # of values from 3 to 1.

@robschmuecker - just curious, do we need to use JS at all or does it seem like CSS can be used to achieve this? Better for us to make a demo that doesn't require script changes.

jQuery Foundation member

@MauriceG @robschmuecker

Really looks cool! Nice work guys!



Only reason I see that the JS is needed is if we want to actually change the sliders to be "greedy" out-of-the-box as highlighted by the OP.

TBH I'm not sure why they wouldn't be, especially when given the size of some screens meaning the smaller the slider, the harder it would be to control value effectively.

I also agree think that inputs should be shown as an input by default (albeit one you can hide if need-be) so that one can type a specific value in.
In respect of having an editable input, the solution as shown by @MauriceG here demonstrates the same problem I ran into whereby making the slider width:100%; without wrapping it in a container DIV means it will break down off the line which the input is on and the layout isn't as currently intended where the label is on a separate line and then the input and slider on the next.

Also that CSS solution cannot work when someone specifies data-role="fieldcontain" which would break functionality. At least the JS addition of a container/wrapper DIV along with consequent CSS can legislate for all the above.

I feel the only thing that needs addressing codebase wise would be the default greediness of the slider so that it is consistent with all other form elements currently. The other things are great examples of what you "can" do and would be excellent to have as informative examples in the docs.

I'm not even 100% sure that my solution is optimal yet but @uGoMobi did mention that a couple of other elements have a wrapper to make them play nice. I don't want @MauriceG to have to redo all his fine CSS work though!

Let me know your thoughts.


jQuery Foundation member

Fix for this is in branch "range" which will be merged soon.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Dec 31, 2012
@jaspermdegroot jaspermdegroot Slider: Made the slider and input together fill full width. Changed c…
…lass ui-slider-mini to ui-mini for consistency. Fixes #5045
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.