Question

我的网站上有一个jQuery范围滑块，当时还没有使用过£sign show。但是，当您使用滑块更改值时，会删除£符号。有什么方法让他们留下来？

以下是目前的代码：

的JavaScript

<script type="text/javascript">
$(document).ready(function(){
    // Your code here
    $("#submitFilter").hide();
    $(".filterCheck").change(function(){
        $("#submitFilter").click();
    });
    $(".filterCategoryCheck").change(function(){
        document.location = $(this).next('a').attr('href');
    });
    $("#slider-range").slider({
        range: true,
        min: <?php echo $rootPriceFrom; ?>,
        max: <?php echo $rootPriceTo; ?>,
        values: [<?php echo $priceFrom; ?>, <?php echo $priceTo; ?>],
        slide: function(event, ui) {
            $("#priceFrom").val(values[0]);
            $("#priceTo").val(values[1]);
            $("#spanPriceFrom").html(values[0]);
            $("#spanPriceTo").html(values[1]);
        },
        stop: function(event, ui) {
            //alert('a');
            $("#priceGo").click();
        }
    });
    $("#priceFrom").val($("#slider-range").slider("values", 0));
    $("#priceTo").val($("#slider-range").slider("values", 1));
});

</script>

HTML

         <div id="rangedval">Price Range: <span id="rangeval">&#163;<?php echo $priceFrom; ?> - &#163;<?php echo $priceTo; ?></span></div>
        <div id="rangeslider"></div>
         <input type="text" id="priceFrom" name="priceFrom" style="display:none;"/>
        <input type="text" id="priceTo" name="priceTo" style="display:none;"/>
         <input type="submit" class="btn btn-mini btn-success" id="priceGo" value="Search">

实时网址 - http://bit.ly/Iol1jG

Answer 1

您必须将滑动符号添加到幻灯片事件中的跨度，如下所示：

$("#slider-range").slider({
    range: true,
    min: <?php echo $rootPriceFrom; ?>,
    max: <?php echo $rootPriceTo; ?>,
    values: [<?php echo $priceFrom; ?>, <?php echo $priceTo; ?>],
    slide: function(event, ui) {
        $("#priceFrom").val(ui.values[0]);
        $("#priceTo").val(ui.values[1]);
        $("#rangeval").html("£"+ui.values[0]+" - £"+ui.values[1]); //edited part
    },
    stop: function(event, ui) {
        //alert('a');
        $("#priceGo").click();
    }
});

Answer 2

尝试这样的事情

    $( "#slider-range" ).slider({
        orientation: "vertical",
        range: true,
        values: [ 17, 67 ],
        slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

参考

http://jqueryui.com/slider/#range-vertical

对于您的代码，它将类似于 FIDDLE

        slide: function( event, ui ) {
            $("#spanPriceFrom").html("£" + ui.values[0]);
            $("#spanPriceTo").html("£" + ui.values[1]);
        }

将井号添加到jquery范围滑块

2 个答案: