JQuery Scroll Limit to Span Text-CodePudding

Firstly please excuse my knowledge of JQuery im a total noob and struggline to get this code to work. I did try a search but could not find a solution for my issue.

Ok so I have a little scroll bar which allows the user to select a tempo from 40 to 300 bpm these are the limits I have set for the slider.

Under the slider is a text input box so people can just enter the bpm manually example: 121 If the number entered is lower or highr then the limites meantioned above, I need to set the Span text to the lower or higher limit (example 40 lower limit and 300 max limit)

I also need 2 outputs updating at the same time: one is the text input field and the other is a span

here is the code I have

$('#BPMRange')
  .on('input', function() {
    var value = $(this).val();
    $('#Test').text(value);
  })


$('#BPM')
  .keyup(function() {
    var value = $(this).val();
    $('#Test').text(value);
  })
  .keyup();


$('#BPM').on('change blur', function() {
  if ($(this).val().trim().length === 0) {
    $(this).val($default_BPM);
    var value = $(this).val();
  }

  if ($(this).val() < 40) {
    $('#Test').text('40');
  } else if ($(this).val() > 300) {
    $('#Test').text('300');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="range" min="40" max="300" value="300"  id="BPMRange">
  <br>
  <input name="BPM" type="text" id="BPM" value="300" >
</div>



<span id="Test"></span>

Thank you for any advice you can share - I do appreciate it

CodePudding user response：

Just change the others' text() or val() on change event.

var range = $('#BPMRange')
var input = $('#BPM')
var test = $("#Test");

range
  .on('input', function() {
    var value = $(this).val();
    test.text(value);
    input.val(value)
  })


input.on('change', function() {
  var value = $(this).val();
  value = Math.min(300, value);
  value = Math.max(40, value);
  range.val(value);
  test.text(value);
  input.val(value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="range" min="40" max="300" value="300"  id="BPMRange">
  <br>
  <input name="BPM" type="text" id="BPM" value="300" >
</div>

<span id="Test"></span>

CodePudding user response：

Is this what you were after:

$(function() {
  let slider = $(".tbi-slider")[0];
  let loanAmount = $(".tbi-calc-loanAmount");
  let totalLoanAmount = $(".tbi-calc-loanTotalAmount");
  let Min = $(".tbi-slider").attr("min");
  let Max = $(".tbi-slider").attr("max");
  $("#label").html(Min);
  $("#co-tbi-loanAmount-input").change(function(s) {
    var numberInputValue = s.target.value;
    if (numberInputValue.match(/^[0-9] $/) == null) {
      $("#co-tbi-loanAmount-input").val(Min);
    }
    slider.value = parseInt(numberInputValue);
    if (parseInt(numberInputValue) < parseInt(Min)) {
      $("#co-tbi-loanAmount-input").val(Min);
      $("#label").html(Min)
    } else if (parseInt(numberInputValue) > parseInt(Max)) {
      $("#co-tbi-loanAmount-input").val(Max);
      $("#label").html(Max)
    }
    if (
      parseInt(numberInputValue) >= parseInt(Min) &&
      parseInt(numberInputValue) <= parseInt(Max)
    ) {
      $("#co-tbi-loanAmount-input").val(numberInputValue);
      $("#label").html(numberInputValue)
    }
    $("#tbi-range-slider").slider("value", $(this).val());
  });

  $("#tbi-range-slider").slider({
    min: parseInt(Min),
    max: parseInt(Max),
    orientation: "horizontal",
    range: "min",

    slide: function(event, ui) {
      refreshSwatch(),
        //Add the below line to update input feil on slider change
        //$("#co-tbi-loanAmount-input").val(ui.value);
        $("#label").html(ui.value)
    },

  });
});

function refreshSwatch() {
  $("#tbi-range-slider").css("background-color", "#729fcf");
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

#tbi-range-slider {
  display: inline-block;
  width: 300px;
  margin: 15px;
  background-image: none;
}

#tbi-range-slider .ui-slider-range {
  background: #ef2929;
}

<input id="co-tbi-loanAmount-input"  value="40">
<div  id="tbi-range-slider" min="40" max="300" value="40"></div>
<div  id="label"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

I hope this helps