Customizing jQuery-UI-Slider-Höhe & Breite

Beim anpassen der Höhe/Breite des jQuery UI Slider (und Griff) der Griff wird nun die Folie zu weit nach Links (außerhalb des Reglers). Gibt es einen empfohlenen Weg zu gehen über das tun dies?

Hier ist ein Turnschuh, Ihnen zu zeigen, was ich meine: http://jsfiddle.net/w7A4k/

Ich konnte nichts sehen in der API-Dokumentation für diese, und ich bin mit einem sehr einfachen setup:

$("#slider").slider({
    orientation: "horizontal",
    max: 100,
    min: 0
});
InformationsquelleAutor lhan | 2013-11-22
  1. 15

    Versuchen

    fiddle demo

    .ui-slider .ui-slider-handle {
    height: 15px;
    width: 5px;
    padding-left: 5px; //add this
}

    Setzen Sie den Schieberegler im Balken hinzufügen padding-left: 5px;

    • sehr schön. Das funktioniert!
    • Willkommen gern 🙂
    • Dein Beispiel geht an der linken Seite viel mehr als auf der rechten Seite (für einen ganzen Griff Breite)
    InformationsquelleAutor Tushar Gupta - curioustushar
  2. 0

    Einheitsgröße von JQuery UI Slider ist in em. Daher Schieberegler Größe im Verhältnis zur Textgröße.

    • Die schriftart ändern, die Größe des slider-div zu behandeln regler HÖHE.
    • Ändern Sie den container Breite Schieberegler, um die Griff-Schieberegler BREITE.
    InformationsquelleAutor Rashid
  3. 0
    $(document).ready(function() {   
    function home_page_banner_height(selector) {   
        var wind_widht = $( window ).width();   
        var req_height = ( (banner_height / banner_width) * 100 );   
        //banner_height is height of item div of carousel and banner_width is width of item div of caousel 

        var calculate_height = (wind_widht / 100) * req_height;
        $('.v_center_con .v_center_inner').height(calculate_height);     
        $(selector).height(calculate_height);     
    }

    home_page_banner_height('.banner_con .item');     

    $(window).resize(function() {     
        home_page_banner_height('.banner_con .item');           
        //this function will make your slider responsive for all screen sizes
    });
});
    InformationsquelleAutor Ahsan
Schreibe einen Kommentar