दो यूके स्लाइडर दो हैंडल के साथ दो टेक्स्ट बॉक्स से इनपुट के साथ?

मैं इस http://www.israel-diamonds.com/search/diamonds/default.aspx .Currently की तरह दो पाठ बॉक्स से जानकारी के साथ दो हैंडल के साथ एक jQuery स्लाइडर की जरूरत है मैं एक एकल पाठ बॉक्सदो यूके स्लाइडर दो हैंडल के साथ दो टेक्स्ट बॉक्स से इनपुट के साथ?

$("#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)); 
});

कोई भी सुझाव से इनपुट के साथ एक एकल संभाल स्लाइडर है?

संपादित करें:

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

और

$("#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 }); 
    });

स्रोत

2012-02-28 bala3569

दुर्भाग्य से, कई स्लाइडर हैंडल' सीमा के साथ असंगत हैं। क्या उस विकल्प को छोड़ना संभव होगा? –

@ FrédéricHamidi: हाँ यह सिर्फ एक नमूना – bala3569

आपको वास्तव में क्या समस्या है? –

मान लें कि आप दो <input> तत्व:

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

और एक स्लाइडर प्लेसहोल्डर तत्व:

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

आप एक से अधिक संभाल मोड में स्लाइडर विजेट डाल करने के लिए values विकल्प का उपयोग कर सकते हैं और साथ <input> तत्वों के मूल्यों को सिंक्रनाइज़:

$("#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()); 
});

आप this fiddle में परिणाम देख सकते हैं।

स्रोत

2012-02-28 13:25:20

: धन्यवाद लेकिन हैंडल – bala3569

ओवरलैप कर रहे हैं यह वास्तव में, आप इस व्यवहार को रोकने के लिए 'श्रेणी: सत्य' विकल्प निर्दिष्ट कर सकते हैं। अपडेटेड फिडल [यहां] (http://jsfiddle.net/FPCRb/1/)। –

यह कोड मास्टरपेज के साथ ठीक काम कर रहा है लेकिन मेरे ईडीआईटी भाग में कोड एक त्रुटि लौटा रहा है '/ स्लीड' अनुप्रयोग में सर्वर त्रुटि। राज्य की जानकारी इस पृष्ठ के लिए अमान्य है और दूषित हो सकती है। – bala3569

आधिकारिक jQuery यूआई प्रलेखन से: "मिनट" `विकल्प: 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>

स्रोत

2017-06-27 18:15:12 georgecodes

दो यूके स्लाइडर दो हैंडल के साथ दो टेक्स्ट बॉक्स से इनपुट के साथ?

उत्तर

संबंधित मुद्दे