Javascript 如何忽略步骤并在jquery滑块上设置确切的金额

我有一些关于jQuery滑块的问题

我有以下JSFIDLE来帮助解释。

$（“#滑块”）.滑块({
范围：“分钟”，
价值：5000，
最低：5000，
最大值：1000000，
步骤：5000，
幻灯片：功能（事件、用户界面）{
$（“#值”）.html（$（“#滑块”）.slider（“值”）+“年”）；
$（“#value”）.css（“左边距”，（ui.value-5000）/（1000000-500）*80+“%”；
$（“#值”）.css（“左”，“-50px”）；
}
});
$（“#值”）.html（$（“#滑块”）.slider（“值”）+“年”）；
美元（“#值”）.css（“左边距”，（5000-5000）/（1000000-5000）*80+“%”；
$（“#值”）.css（“左”，“-50px”）；
$（“#设置值”）。单击（函数（）{
$（“#滑块”）。滑块（“值”，171098）；
$（“#值”）.html（$（“#滑块”）.slider（“值”）+“年”）；
$（“#值”）.css（“左边距”，（$（“#滑块”）.slider（“值”）-5000）/（1000000-5000）*80+“%”；
});
。表单组{
宽度：80%；
保证金：0px自动；
}
#滑块{
边缘底部：20px；
边缘顶部：20px；
}
#价值观{
背景:#CC99CC；
颜色：白色；
字体大小：粗体；
边缘顶部：10px；
填充：0.5em；
文本对齐：居中；
宽度：6em；
}

设置
关于第一个问题：

将
$（“#滑块”）.slider（“值”）
替换为
ui.value

关于第二个问题：

你可以做一些“补丁”。单击按钮时，将
步骤
属性设置为
1
。当用户开始拖动滑块时，再次将其转到
5000

您可以在下面的代码段中看到这两个答案


$（“#滑块”）.滑块({
范围：“分钟”，
价值：5000，
最低：5000，
最大值：1000000，
步骤：5000，
幻灯片：功能（事件、用户界面）{
$（“#value”）.html（ui.value+“年”）；
$（“#value”）.css（“左边距”，（ui.value-5000）/（1000000-500）*80+“%”；
$（“#值”）.css（“左”，“-50px”）；
},
开始：功能（事件、用户界面）{
$（此）.slider（“选项”，“步骤”，5000）；
}
});
$（“#值”）.html（$（“#滑块”）.slider（“值”）+“年”）；
美元（“#值”）.css（“左边距”，（5000-5000）/（1000000-5000）*80+“%”；
$（“#值”）.css（“左”，“-50px”）；
$（“#设置值”）。单击（函数（）{
$（“#滑块”）。滑块（“选项”，“步骤”，1）。滑块（“值”，171098）；
$（“#值”）.html（$（“#滑块”）.slider（“值”）+“年”）；
$（“#值”）.css（“左边距”，（$（“#滑块”）.slider（“值”）-5000）/（1000000-5000）*80+“%”；
});
。表单组{
宽度：80%；
保证金：0px自动；
}
#滑块{
边缘底部：20px；
边缘顶部：20px；
}
#价值观{
背景:#CC99CC；
颜色：白色；
字体大小：粗体；
边缘顶部：10px；
填充：0.5em；
文本对齐：居中；
宽度：6em；
}

在事件处理程序中使用ui.value设置
，是获得正确输入的关键

...
slide: function(event, ui) {
    $value.text(ui.value + ' years');
....

看看这把小提琴，它还展示了如何更好地定位移动值元素

您可以延迟幻灯片回调中的逻辑