jQuery UI slider : Overlaying the range image

Question

我正在构建一个垂直范围 slider :

这会很棒。

不过，我使用 jQuery UI 1.8 实现了这一点:

我将 slider 包裹在一个容器中，该容器具有 padding-top 和 padding-bottom 以保持 slider 的范围元素就位。

没有容器，范围将覆盖背景:

有什么好的解决方案吗？

如果需要，这里有一些代码:

LESS 代码:

    /*
     * Center the slider by wrapping it in a container
     */
    .slider-container {
        text-align: center;

        /*
         * Another container that holds the actual background of the slider,
         * with padding to make sure the handle doesn't go outside of the background.
         */
        .slider-bg {
            background: transparent url('/static/images/slider_bg.png') 0% 0%;
            height: 235px;
            width: 28px;
            padding-top: 20px;
            padding-bottom: 7px;
            margin: 0 auto;

            /*
             * The actual element holding the slide handler
             */
            .ui-slider {
                height: 234px;
                width: 28px;
                background: none;

                // Overrides
                .border-radius(0 0 0 0);
                border: 0;

                .ui-slider-handle {
                    width: 28px;
                    height: 29px;

                    background: transparent url('/static/images/slider_handle.png') 0% 0%;

                    // Overrides
                    left: 0;
                    .border-radius(0 0 0 0);
                    border: 0;
                }

                .ui-slider-range {
                    width: 28px;
                    background: transparent url('/static/images/slider_range.png') 0% 0%;
                    padding-bottom: 13px;
                }
            }
        }
    }

JS:

$('div.slider').slider({
    orientation: 'vertical',
    animate: 'true',
    range: 'min',
    slide: function (event, ui) {
    }
});

Answer 1

这样做:

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 14px; -webkit-border-top-left-radius: 14px; -khtml-border-top-left-radius: 14px; border-top-left-radius: 14px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 14px; -webkit-border-top-right-radius: 14px; -khtml-border-top-right-radius: 14px; border-top-right-radius: 14px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 14px; -webkit-border-bottom-left-radius: 14px; -khtml-border-bottom-left-radius: 14px; border-bottom-left-radius: 14px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 14px; -webkit-border-bottom-right-radius: 14px; -khtml-border-bottom-right-radius: 14px; border-bottom-right-radius: 14px; }

和 UI 小部件标题:

.ui-widget-header
{
    border: 1px solid #dddddd;
    background: #33CCFF url(images/ui-bg_highlight-soft_50_dddddd_1x100.png) repeat-x 50% 50%;
    color: #444444;
    font-weight: bold;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

小部件内容:

.ui-widget-content {background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; }

这是一个demo为你