Javascript/Jquery 滑块更改功能

Question

好的，问题来了。我很讨厌 jquery，但我正在努力变得更好。我有一个 jquery ui 范围滑块，效果很好。但是我正在尝试添加一个更改功能，以便在更改值时将最小年龄值放入一个文本框中，将最大年龄值放入另一个文本框中。 “更改”块上方的所有内容都可以正常工作，但是一旦我将块从“更改：”向下添加到代码中，滑块就不会出现并且我有一个明显的错误。我已经根据在线教程尝试了这 20 种不同的方法，但我就是不知道为什么它不起作用。

 $( "#slider-range" ).slider({
      range: true,
      min: 18,
      max: 90,
      
      values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
      slide: function( event, ui ) {$( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );}}),
      
      change: function(event, ui){
            var x = document.getElementById('minAgeAmt');
            x.value = $( "#slider-range" ).slider( "values", 0 );
            var y = document.getElementById('maxAgeAmt');
            y.value = $( "#slider-range" ).slider( "values", 1 );  
      };

********* 编辑 ***********

现在感谢 Leighton，它正在工作，只是一个问题。我现在有了这个：

$( "#slider-range" ).slider({
range: true,

min: 18,
max: 90,
values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
slide: function( event, ui ) {$( "#amount" ).val("Age Range : " + ui.values[ 0 ] + " - " + ui.values[ 1 ]);},
change: function(event, ui) {
    var x = document.getElementById('minAgeAmt');
    x.value = $( "#slider-range" ).slider( "values", 0 );
    var y = document.getElementById('maxAgeAmt');
    y.value = $( "#slider-range" ).slider( "values", 1 ); 
    

}

});

这很好用，但是给#amount 元素赋值的位只有在进行更改时才会触发（显然）。我怎样才能让它在页面加载时也开始触发？在页面加载的那一刻，它看起来像这样：

一旦我改变了滑块，：

我只是想要在页面加载时根据初始值生成相同的标题

Answer 1

试试这个：

$( "#slider-range" ).slider({
    range: true,
    min: 18,
    max: 90,

    values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
    slide: function( event, ui ) {
        $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
    },

    change: function(event, ui) {
        var x = document.getElementById('minAgeAmt');
        x.value = $( "#slider-range" ).slider( "values", 0 );
        var y = document.getElementById('maxAgeAmt');
        y.value = $( "#slider-range" ).slider( "values", 1 );  
    }
});

---

第 2 部分

对于设置“金额”值，您可以在上面的代码中尝试：

// This gets the current values which you have set above
var values = $( "#slider-range" ).slider( "option", "values" );
$("#amount").val(values[0] + " - " + values[1]);

参考https://api.jqueryui.com/slider/#option-values

Answer 2

使用关注

对于最小值

var min = $("#slider-range").slider("option", "min");

求最大值

var max = $("#slider-range").slider("option", "max");

Answer 3

有一些语法错误，请在 sn-p 下面找到更多信息，您必须在 slider 函数关闭之前输入 change function

$("#slider-range").slider({
    range: true,
    min: 18,
    max: 90,

    values: [],
    slide: function(event, ui) {
        $("#amount").val(ui.values[0] + " - " + ui.values[1]);
    },
    change: function(event, ui) {
        var x = document.getElementById('minAgeAmt');
        x.value = $("#slider-range").slider("values", 0);
        var y = document.getElementById('maxAgeAmt');
        y.value = $("#slider-range").slider("values", 1);
    } //close change function
}); //close Slider Function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

Answer 4

语法错误，你错过了最后一行的)
更新编码

$( "#slider-range" ).slider({
      range: true,
      min: 18,
      max: 90,

      values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
      slide: function( event, ui ) {$( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );},

      change: function(event, ui){
            var x = document.getElementById('minAgeAmt');
            x.value = $( "#slider-range" ).slider( "values", 0 );
            var y = document.getElementById('maxAgeAmt');
            y.value = $( "#slider-range" ).slider( "values", 1 );  
      }
});