我正在使用引导滑块http://seiyria.com/bootstrap-slider/,我想根据滑块的拖动来更新和增加每个突出显示的值,每个突出显示的值以不同的数字递增。 (拖动条从1到200,然后递增1)。
请帮助
$(".slider-txt:input").inputmask({
alias: 'numeric',
groupSeparator: '.',
allowPlus: true,
allowMinus: true,
radixPoint: ',',
autoGroup: true,
digits: '0',
digitsOptional: true,
prefix: '',
placeholder: '',
autoUnmask: 'false'
});
$(".slider").each(function() {
var $sibling = $(this).closest(".slider-container").find(".slider-txt");
var mySlide `enter code here`
r = $(this).slider({
formatter: `enter code here`
function(value) {
return '' + value;
}
}).on('change', function(data) {
// on slide did not update on click (jump)
var newvalue = parseInt($(this).val());
var oldvalue = parseInt($sibling.val());
if (oldvalue != newvalue) {
$sibling.val(newvalue)
}
}).data('slider').getValue();
// set sibling value
$sibling.val(parseInt($(this).val()));
$sibling.blur(function() {
var $sibling = $(this).closest(".slider-container").find("input.slider");
var newvalue = parseInt($(this).val());
var oldvalue = parseInt($sibling.val());
var minvalue = parseInt($sibling.attr("data-slider-min"));
var maxvalue = parseInt($sibling.attr("data-slider-max"));
if (newvalue < minvalue) {
newvalue = minvalue;
$(this).val(newvalue);
} else if (newvalue > maxvalue) {
newvalue = maxvalue;
$(this).val(newvalue);
}
// set slider value
mySlider.setValue(parseInt(newvalue));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1">
<span>1</span>
</div>
<div class="col-9">
<input class="slider" type="text" data-slider-min="1" data-slider-max="200" data-slider-step="1" data-slider-tooltip="always" data-slider-value="1" />
</div>
<div class="col-2">
<!-- pattern="\d*" will show numeric keyboard -->
<input class="form-control text-center slider-txt" type="text" pattern="\d*" data-inputmask="" value="" />
</div>