How to prevent slider from stretching?

Question

Just getting acquainted with jQuery UI. So, this is a block of code from my view:

<label id="min">
    5000</label>
<div id="slider">
</div>
<label id="max">
    9000</label>

And a part of the script:

    $('#slider').slider({
        animate: true,
        range: true,
        min: 5000,
        max: 9000,
        values: [5000, 9000],
        slide: function (event, ui) {
            //doing smth
        }
    });

Everything works fine, but the slider is stretched and takes the whole line. The labels are below and under it. I expected them all to be in one line.

What should I do to achieve it?

EDIT

This is what I am expecting:

Correct

And this is what I have:

Error

EDIT

I tried to override the slider css by adding the following code to my Site.css file:

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 0.5em !important;
    height: 1.2em !important;
    cursor: default;
}

but nothing changed. How can I make jQuery use this css?

Another note: the original css looks like this:

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

So, is css the issue here? Or something else makes my slider stretch??

MORE

This is the generated html:

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;">
    </div>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;">
    </a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;">
    </a>
</div>

At last

I had to override .ui-slider class, not .ui-slider .ui-slider-handle. That was the issue.

Rajesh Rolen- DotNet De, thank you!

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

You can set the width for slider. Change the width and height of jquery slider

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
width:1em !important;
height:1em !important;
 cursor: default;
}

http://tycoontalk.freelancer.com/css-forum/200419-jquery-css-slider-width-100-problem.html

edited May 23 '17 at 11:48

Community

1
1

answered Sep 05 '12 at 04:41

Dr. Rajesh Rolen

14,029
41
106
178

Could you give me a hint, how I can apply the declaration you show to the one I have? – horgh Sep 05 '12 at 04:46
I don't have `;` there, but `,`.....If I add `width: 150,` nothing changes.....If I add `width: 150 !important,`, the slider disappears at all.. – horgh Sep 05 '12 at 04:48
did u set width:150 or 150px?.. better to write 150px. – Dr. Rajesh Rolen Sep 05 '12 at 04:56
if I add `150` nothing changes, if I add `150px` visual studio generates a warning saying that a comma is expected and the slider disappears in the resulting view – horgh Sep 05 '12 at 05:01
Sorry, when I add 150px, it results in no jquery ui at all – horgh Sep 05 '12 at 05:02
I'd say that the browser cannot process it – horgh Sep 05 '12 at 05:03
I tried to put the code you provided into the *Site.css* file, but still nothing changed – horgh Sep 05 '12 at 05:21
You could probably not catch that, but this is an asp.net mvc3 view..where should I put this css to make slider use it? – horgh Sep 05 '12 at 05:28
I've edited my question...Could you, please, have a look at it once more? – horgh Sep 05 '12 at 05:45

How to prevent slider from stretching?

1 Answers1