Thanh trượt Jquery UI với hai tay cầm có đầu vào từ hai hộp văn bản?

Tôi cần một thanh trượt jquery với hai tay cầm với đầu vào từ hai textbox như http://www.israel-diamonds.com/search/diamonds/default.aspx này .Hiện nay tôi có một tay cầm thanh trượt duy nhất với đầu vào từ một textbox đơnThanh trượt Jquery UI với hai tay cầm có đầu vào từ hai hộp văn bản?

$("#slider").slider({ 
    value: 1, 
    step: 1000, 
    min: 0, 
    max: 5000000, 
    slide: function(event, ui) { 
     $("input").val("$" + ui.value); 
    } 
}); 
$("input").change(function() { 
    var value = this.value.substring(1); 
    console.log(value); 
    $("#slider").slider("value", parseInt(value)); 
});

Bất kỳ đề nghị?

EDIT:

<div class="demo"> 
    <input type="text" class="sliderValue" /> 
     <p> 
     </p> 
     <div id="slider"></div> 
    </div>

và

$("#slider").slider({ 
     range: "min", 
     value: 1, 
     step: 10, 
     min: 0, 
     max: 1000, 
     slide: function (event, ui) { 
      $("input").val(ui.value); 
     } 
    }); 


    $("input").change(function (event) { 
     var value1 = parseFloat($("input").val()); 
     var highVal = value1 * 2; 
     $("#slider").slider("option", { "max": highVal, "value": value1 }); 
    });

Nguồn

2012-02-28 bala3569

Thật không may, nhiều tay cầm thanh trượt không phù hợp với 'khoảng: "min" 'tùy chọn. Có thể thả tùy chọn đó không? –

@ FrédéricHamidi: có thats chỉ là một mẫu – bala3569

Bạn đang gặp phải vấn đề gì? –

Giả sử bạn có hai <input> yếu tố:

<input type="text" class="sliderValue" data-index="0" value="10" /> 
<input type="text" class="sliderValue" data-index="1" value="90" />

Và một yếu tố trượt giữ chỗ:

<div id="slider"></div>

Bạn có thể sử dụng tùy chọn values đặt widget trượt theo nhiều chế độ xử lý, và đồng bộ hóa các giá trị của các yếu tố <input> với:

$("#slider").slider({ 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [10, 90], 
    slide: function(event, ui) { 
     for (var i = 0; i < ui.values.length; ++i) { 
      $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
     } 
    } 
}); 

$("input.sliderValue").change(function() { 
    var $this = $(this); 
    $("#slider").slider("values", $this.data("index"), $this.val()); 
});

Bạn có thể xem kết quả trong this fiddle.

Nguồn

2012-02-28 13:25:20

: Cảm ơn nhưng các tay cầm đang chồng chéo – bala3569

Nó thực sự, bạn có thể chỉ định tùy chọn 'phạm vi: true' để ngăn chặn hành vi này. Cập nhật fiddle [ở đây] (http://jsfiddle.net/FPCRb/1/). –

Mã này hoạt động tốt với trang chính nhưng mã trong phần EDIT của tôi đang trả về lỗi Máy chủ Lỗi trong ứng dụng '/ Trượt'. Thông tin trạng thái không hợp lệ đối với trang này và có thể bị hỏng. – bala3569

Từ Tài liệu chính thức jQuery UI: https://jqueryui.com/slider/#range

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Slider - Range slider</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
</head> 
<body> 

    <p> 
     <label for="amount">Price range:</label> 
     <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 
    <div id="slider-range"></div> 

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
     $(function() { 
     $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
     }); 
     $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
     " - $" + $("#slider-range").slider("values", 1)); 
     }); 
    </script> 

</body> 
</html>

Nguồn

2017-06-27 18:15:12 georgecodes

Thanh trượt Jquery UI với hai tay cầm có đầu vào từ hai hộp văn bản?

Trả lời

Các vấn đề liên quan