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

Melee

Answer 1

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

Flashlight

This is making the slider disappear (not being rendered). – Melee

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. – Flashlight

I'm using jquery-ui-1.9.2 and .slider("disable") works like a charm. It decreases the transparency and disables dragability. – Furze

Any way to keep the transparency as it is but disable dragability at the same time? – Cytoplast

@ThomasSebastian try to add $(".ui-slider-disabled.ui-state-disabled").removeClass("ui-state-disabled"); after you call it. – Industrialism

Answer 2

I tried all suggested. Only this works:

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

Nonagon

Answer 3

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; });

Chapel

This does the job. – Borroff

Answer 4

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');

Chub

Answer 5

You would simply have to do this:

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

Kerk

This is making the slider disappear (not being rendered). – Melee

Answer 6

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

Osteomalacia

Answer 7

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

Toadeater

This is not what the OP asked for. He wanted the slider to be disabled, which is not what your example shows. – Hennessey