deslizador de la interfaz de usuario Jquery con dos asas con entrada de dos cuadro de texto?

necesito un control deslizante jQuery con dos asas con entradas de dos cuadro de texto como éste http://www.israel-diamonds.com/search/diamonds/default.aspx .Actualmente tengo una sola corredera del mango con el aporte de un solo cuadro de textodeslizador de la interfaz de usuario Jquery con dos asas con entrada de dos cuadro de texto?

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

Cualquier sugerencia?

EDIT:

<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 }); 
    });

Fuente

2012-02-28 bala3569

Por desgracia, varios mangos deslizantes son incompatibles con el 'rango: "min" opción'. ¿Sería posible descartar esa opción? –

@ FrédéricHamidi: sí, eso es solo una muestra – bala3569

¿Qué problema tienes exactamente? –

Asumiendo que tiene dos elementos: <input>

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

y un elemento deslizante marcador de posición:

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

Puede utilizar la opción values para poner el widget deslizador en el modo de manejar múltiples, y sincronizar los valores de los elementos con los <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()); 
});

Puede ver los resultados en this fiddle.

Fuente

2012-02-28 13:25:20

: Gracias pero los controladores se superponen – bala3569

Efectivamente, puede especificar la opción 'range: true' para inhibir este comportamiento. Fiddle actualizado [aquí] (http://jsfiddle.net/FPCRb/1/). –

Este código funciona bien con la página maestra pero el código en mi parte EDITAR está devolviendo un error Error del servidor en la aplicación '/ Slid'. La información de estado no es válida para esta página y podría estar dañada. – bala3569

A partir de la documentación oficial de 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>

Fuente

2017-06-27 18:15:12 georgecodes

deslizador de la interfaz de usuario Jquery con dos asas con entrada de dos cuadro de texto?

Respuesta

Cuestiones relacionadas