How to prevent slider from stretching?


Tags: c#,jquery,css,asp.net-mvc-3,slider

Problem :

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!



Solution :

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


    CSS Howto..

    How to add an existing class to td in css file?

    How to center my text vertically in a circular div with css

    Chrome showing target link after event has been prevented

    How to align the menu to center after certain width media query fires for RWD

    how to make row span column content start at the top of the column with css and html

    How to make a floating page div responsive

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    How to get CSS to select ID that begins with a string (not in Javascript)?

    How to transform Menu icon to Arrow icon? [closed]

    How to center a group of images in HTML/CSS?

    how to target individual elements in grails g:render

    how to spread small image file in background and it should scroll with other elements

    How to change overlay whole div by an image via CSS

    how can I center this menu with CSS

    How do I put my index.html in the same folder as my other .html files on github?

    How to override inline css through javascript?

    How to create a custom shape - css

    How to use numbers from a js file in the css sheet?

    How to make two separate, independent columns (using html and css)

    CSS How to create a container with non-linear borders

    How to move an image up and down smoothly with CSS?

    How can I resize the height of an image to crop with the browser window?

    How to format a table using CSS such that the table is within the screen and cells use as much possible and necessary width?

    How to change CSS over selected element only using $(this)

    how do I use standard GWT CSS style themes from non-GWT pages?

    How do I add a Css file to my Class library?

    How to remove a css class using jquery in a certain screen size

    First and Second touch of a button, how to show images at different times?

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How to change the color of the text next to an input field in an HTML form?