Wie können Sie mehrere Werte von zwei Preis-Ranger

Question

Ich arbeite an einem Preisrechner mit mehreren Dias Bereichen.

Ich habe Schwierigkeiten, das Ergebnis in Ganzzahl zu konvertieren und beide Ergebnisse zu multiplizieren. Auch nicht sicher, wie mit der Onchange-Funktionalität des Sliders umzugehen ist.

Bitte lesen Sie meinen Code unten:

<script> 
 
    $(function() { 
 
     $("#slider-range-min").slider({ 
 
     range: "min", 
 
     value: 400, 
 
     min: 400, 
 
     max: 2000, 
 
     slide: function(event, ui) { 
 
      $("#amount").val("£" + ui.value); 
 
     } 
 
     }); 
 
     $("#amount").val("£" + $("#slider-range-min").slider("value")); 
 
     $('#slider-range-min').draggable(); 
 
    }); 
 

 
    $(function() { 
 
    $("#slider-range-min2").slider({ 
 
     range: "min", 
 
     value: 3, 
 
     min: 3, 
 
     max: 12, 
 
     slide: function(event, ui) { 
 
     $("#amount2").val(ui.value + " months"); 
 
     } 
 
    }); 
 
    $("#amount2").val($("#slider-range-min2").slider("value") + " months"); 
 
    $('#slider-range-min2').draggable(); 
 
    }); 
 

 
    $(function() { 
 
    x = ($("#slider-range-min").text(), 10); 
 
    y = ($("#slider-range-min2").text(), 10); 
 
    $("#amount3") = (x * y).text().draggable(); 
 
    }); 
 

 
    < /script>

.ui-slider { 
 
    position: relative; 
 
    text-align: left; 
 
} 
 
.ui-slider .ui-slider-handle { 
 
    position: absolute; 
 
    z-index: 2; 
 
    width: 1.6em; 
 
    height: 2em; 
 
    cursor: default; 
 
    -ms-touch-action: none; 
 
    touch-action: none; 
 
} 
 
.ui-slider .ui-slider-range { 
 
    position: absolute; 
 
    z-index: 1; 
 
    font-size: .7em; 
 
    display: block; 
 
    border: 0; 
 
    background-position: 0 0; 
 
} 
 
.ui-slider-horizontal { 
 
    height: .8em; 
 
} 
 
.ui-slider-horizontal .ui-slider-handle { 
 
    top: -.6em; 
 
    margin-left: -.6em; 
 
} 
 
.ui-slider-horizontal .ui-slider-range { 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
.ui-slider-horizontal .ui-slider-range-min { 
 
    left: 0; 
 
} 
 
.ui-slider-horizontal .ui-slider-range-max { 
 
    right: 0; 
 
} 
 
/* Component containers 
 
----------------------------------*/ 
 

 
.ui-widget input, 
 
.ui-widget button { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 1em; 
 
} 
 
.ui-widget.ui-widget-content { 
 
    border: 1px solid #c5c5c5; 
 
} 
 
.ui-widget-header { 
 
    border: 1px solid #dddddd; 
 
    background: #e9e9e9; 
 
    color: #333333; 
 
    font-weight: bold; 
 
} 
 
/* Interaction states 
 
----------------------------------*/ 
 

 
.ui-state-default, 
 
.ui-widget-content .ui-state-default, 
 
.ui-widget-header .ui-state-default, 
 
.ui-button, 
 
/* We use html here because we need a greater specificity to make sure disabled 
 
works properly when clicked or hovered */ 
 

 
html .ui-button.ui-state-disabled:hover, 
 
html .ui-button.ui-state-disabled:active { 
 
    border: 1px solid #c5c5c5; 
 
    background: #323470; 
 
    font-weight: normal; 
 
    color: #454545; 
 
} 
 
.ui-widget-content .ui-state-hover, 
 
.ui-widget-header .ui-state-hover, 
 
.ui-state-focus, 
 
.ui-widget-content .ui-state-focus, 
 
.ui-widget-header .ui-state-focus, 
 
.ui-button:hover, 
 
.ui-button:focus { 
 
    border: 1px solid #cccccc; 
 
    background: #009786; 
 
    font-weight: normal; 
 
    color: #2b2b2b; 
 
}

<script src="https://cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.js"></script> 
 
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<p> 
 
    <label for="amount">Maximum price:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 

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

 
<div id="slider-range-min2"></div> 
 

 
<p></p> 
 
<p></p> 
 
<p> 
 
    <label for="amount2">Maximum time period:</label> 
 
    <input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p>

Answer 1

Verwenden ParseInt Werte konvertieren integer. (Sie sollten natürlich prüfen, ob Werte gültig sind, bevor sie mit

Auch x und y Zahlen sind, und Sie können .draggable() nicht so verwenden, oder setzen sie auf ein jQuery-Objekt gleich.

$(function() { 
    x = parseInt($("#slider-range-min").text(), 10); 
    y = parseInt($("#slider-range-min2").text(), 10); 
    if(!isNaN(x) && !isNaN(y)) 
    $("#amount3").val(x * y)).draggable(); 
    });