jQuery readonly slider - how to do?

Question

How can I have a jQuery slider that is readonly? One that would display a value but the user wouldn't be allowed to move it?

Thanks

score 23 · Accepted Answer · answered Jun 09 '09 at 14:25

23

The documentation says there's a .slider('disable') function - not sure what that actually does to the slider element itself, but that may be an option for you.

Documentation here

answered Jun 09 '09 at 14:25

brettkelly

27,655
8
56
72

2

This is making the slider disappear (not being rendered). – Jun 09 '09 at 14:26
Then I suppose the easiest way to do it would be to position a transparent element on top of the slider (thus preventing the user from moving it manually) and control its position using the .value attribute. – brettkelly Jun 09 '09 at 14:31
I'm using jquery-ui-1.9.2 and `.slider("disable")` works like a charm. It decreases the transparency and disables dragability. – nthpixel Sep 17 '13 at 05:51
1

Any way to keep the transparency as it is but disable dragability at the same time? – Thomas Sebastian Oct 09 '14 at 09:58
@ThomasSebastian try to add `$(".ui-slider-disabled.ui-state-disabled").removeClass("ui-state-disabled");` after you call it. – Mowd Feb 26 '19 at 03:19

score 7 · Answer 2 · answered Oct 21 '13 at 16:42

7

I tried all suggested. Only this works:

$('#mySlider').slider({ disabled: true });

answered Oct 21 '13 at 16:42

JJ_Coder4Hire

4,706
1
37
25

score 6 · Answer 3 · answered Mar 06 '14 at 14:26

6

Disabling it makes it transparent. If you want it to look like a normal slider, you can override slide handler to return false:

    $("#mySlider").on("slide", function (event, ui) { return false; });

answered Mar 06 '14 at 14:26

Konstantin Fadeyev

101
1
6

This does the job. – Diego Sagrera Aug 17 '18 at 18:20

score 3 · Answer 4 · answered Jun 23 '09 at 07:56

I have got the same issue that the slider disappears if I use directly $('#mySlider').slider( 'disable' );. I have loaded the slider fisrt..then disabled it. Though it is not a good way, but it works for me.

$('#mySlider').slider(
            {
                range: "min",
                min: 0,
                max: 100,                
                value: $("span", this).text(), 

                }

            });
$('#mySlider').slider( 'disable');

score 1 · Answer 5 · answered Jun 09 '09 at 14:25

1

You would simply have to do this:

$('#mySlider').slider( 'disable' );

answered Jun 09 '09 at 14:25

karim79

339,989
67
413
406

This is making the slider disappear (not being rendered). – Jun 09 '09 at 14:28

score 0 · Answer 6 · edited Sep 29 '13 at 07:41

0

$("#slider").slider("disable") works fine, however reenabling doesn't work $("#slider").slider("enable")

edited Sep 29 '13 at 07:41

Harry

87,580
25
202
214

answered Oct 31 '11 at 05:35

Mark Vital

960
3
14
25

score -1 · Answer 7 · answered Sep 16 '13 at 16:36

-1

I had a client request for this today. Its probably a good idea to do this as a best practice and prevent string input.

Since the slider sets the value in an <input> tag, you can make it "readonly".

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" readonly />
</p>

<div id="slider-range"></div>

Fiddle

answered Sep 16 '13 at 16:36

Ken

207
1
11

1

This is not what the OP asked for. He wanted the slider to be disabled, which is not what your example shows. – pierus Feb 03 '15 at 19:24

jQuery readonly slider - how to do?

7 Answers7