Question

我正在尝试制作一个滑块，以便从价格范围中进行选择。

这是我的HTML代码

                                   <div class="search-price-collateresult">
                                        <div style="clear:both;" id="PriceSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
                                            <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;">
                                            </div>
                                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;">
                                            </a>
                                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;">
                                            </a>
                                        </div>
                                        <div id="range">
                                            <div style="width: 55px; left: 0%; position: absolute; top: 11px; margin-left: 0px;" id="leftP">€5</div>
                                            <div style="left: 100%; top: 11px; position: absolute; margin-left: -0.6em;" id="rightP">€30</div>
                                            <div style="left:0%;position: absolute;top:11px;margin-left: -0.6em;display:none;" id="leftST">5</div><div style="left: 100%; top: 11px; position: absolute; margin-left: -0.6em;display:none;" id="rightST">
                                                30
                                            </div>
                                        </div>
                                    </div>

CSS：

.ui-slider .ui-slider-handle{
    width:50px; 
    height:50px; 
    background:url(Images/) no-repeat; overflow: hidden; 
    position:absolute;
    top: -10px;
    border-style:none; 
}

.ui-slider-horizontal {
    height: 1px;
}

.ui-corner-all {
    border-radius: 12px;
}

.ui-slider {
    position: relative;
    text-align: left;
    margin-left: 0.76923em;
    width: 95%;
    background-color: #e9e9e9;
}
.ui-slider .ui-slider-handle {
    cursor: pointer;
    height: 1.15385em;
    position: absolute;
    width: 1.15385em;
    z-index: 2;
}

.ui-slider-horizontal .ui-slider-handle {
    background-color: #da4d4d;
    margin-left: -0.6em;
    top: -0.5em;
}

.search-price-collateresult {
    position: relative;
    width: 90%;
    padding: 0 0 0px 0;
}

a {
    color: #000;
    text-decoration: none;
    line-height: inherit;
}

a:focus
{
    outline:none;
}

a:hover
{
    color:black;
}

滑块正在按照我的要求显示，但是当点击范围按钮时，它们无法移动。

我是否必须创建某种形式的脚本？或者可以使用CSS控制吗？

由于

Answer 1

这不是一个答案，只是一个冗长的评论。

（1）您还没有提供足够的滑块HTML和js供我们进行故障排除。它是一个自编的滑块，还是你下载的滑块？ 如果是，哪一个？

（2）您将内联CSS与外部CSS混合使用。馊主意。事实上，内联CSS （style=""）总是一个坏主意。

（3）这个滑块应该如何工作？当用户点击leftP或leftST时，您希望发生什么？那些应该做的是什么？

（4）你是对的：大多数滑块使用javascript / jQuery。这是网页检测用户点击并执行某些操作的唯一方法。

（5）观察：您正在使用left:0%为元素分配position。 top: left等仅对position:static的元素不起作用，除非更改，否则这是默认值。我们中的许多人在我们的CSS顶部做了类似的事情：

* {position:relative;box-sizing:border-box;padding:0;margin:0;}

（6）请编辑以下jsFiddle并使其更接近您最终所需的产品。在你提出问题时，我看不出如何进一步帮助你。

jsFiddle Example

如何在滑块上创建端点移动html

1 个答案: