jQuery mobile slider disabled without being greyed out

Question

I want to have a jQuery mobile slider which cannot be dragged but does not appear greyed out.

That is, I want the functionality of: <input type="range" value="86" min="0" max="100" disabled="true"/>

With the look of this: <input type="range" value="86" min="0" max="100"/>

Why do you need that? It would be bad UX, since the user will expect it to move — omma2289, Jul 25 '13 at 22:14
@koala_dev So I have these other sliders which users rate each other with. To show their own ratings, I thought it might be a good idea to have the slider show their average rating. Do you have a suggestion for a better implementation in terms of UX? — jaynp, Jul 25 '13 at 23:12
I would evaluate if a slider is really needed, or if displaying the user rating in a disabled text input or just as text would be enough. If you go for the slider then make sure it is differentiated from the other sliders in some way, either by style or by positioning on the page. Think about what the user will feel/think when they use your app and try to avoid any confusion with your controls. — omma2289, Jul 26 '13 at 16:49

score 3 · Accepted Answer · answered Jul 25 '13 at 22:32

I would really advise against displaying a disabled input with the same appearance of a normal input, I think it would prove negative in terms of UX.

If you really have a good reason for it then you can use this code to remove the class that styles the input to be greyed out:

$('input[disabled]').parent().find('.ui-disabled').removeClass('ui-disabled');

1 Answers1