Solution 1 :

So you have two sliders – one for money and another for months?

Problem :

I have a loan calculator that works fine until i change one of the slider in to input box. when i change the properties in the javascript, it just doesnt work. I would like to know how to make my input in my js section works. As my client wants it changed to a text box.

Here is my HTML Code Snippet:

           <div class="loan-calculator" style="padding-bottom: 1px;">
                    <div class="loan-calculator__controls-list">
                    <div class="loan-calculator__control loan-calculator-control">
                        <span class="loan-calculator-control__caption">My Spendings: <b>RM <span data-money-range-value></span></b></span>
                        <!-- <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--money" data-money-range-slider></div> -->
                        <input type="number" class="form-control" placeholder="Spendings" aria-label="spendings" spendings-input>
                        <div class="loan-calculator-control__help-values">
                            <div class="loan-calculator-control__min-value">Min Spendings: RM 0</div>
                            <div class="loan-calculator-control__max-value">Maximum Spendings: RM 10,000+</div>
                    <div class="loan-calculator__control loan-calculator-control">
                        <span class="loan-calculator-control__caption">Merchant: <b><span data-months-range-value>3</span> <span data-months-range-measure></span></b></span>
                        <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--months" data-months-range-slider></div>
                        <div class="loan-calculator-control__help-values">
                        <div class="loan-calculator-control__min-value">Min Percentage: 0%</div>
                        <div class="loan-calculator-control__max-value">Maximum Percentage: 200%</div>

Here is my Javscript for the slider:

var moneyRangeSliderElem = document.querySelector("[spendings-input]");
var moneyRangevalueElem = document.querySelector("[data-money-range-value]");

var monthsRangeSliderElem = document.querySelector(
var monthsRangeValueElem = document.querySelector("[data-months-range-value]");
var monthsRangeMeasureElem = document.querySelector(

var resultValueElem = document.querySelector("[data-result-value]");

// noUiSlider.create(moneyRangeSliderElem, {
//   start: [5000],
//   step: 1,
//   connect: [true, false],
//   format: wNumb({
//     decimals: 0
//   }),
//   range: {
//     min: 0,
//     max: 10000
//   }
// });

noUiSlider.create(monthsRangeSliderElem, {
  start: [30],
  step: 1,
  connect: [true, false],
  format: wNumb({
    decimals: 0
  range: {
    min: 1,
    max: 200

function calcPayment() {
  var moneyValue = parseInt(moneyRangeSliderElem, 10);
  var monthsValue = parseInt(monthsRangeSliderElem.noUiSlider.get(), 10);

  console.log(-pmt(0.24/12, monthsValue, moneyValue))

  resultValueElem.textContent = numberFormatter.format(
    moneyValue * monthsValue * 0.01

moneyRangeSliderElem.on("input", function(values, handle) {
  moneyRangevalueElem.textContent = numberFormatter.format(values[handle]);


monthsRangeSliderElem.noUiSlider.on("update", function(values, handle) {
  monthsRangeValueElem.textContent = values[handle];
  monthsRangeMeasureElem.textContent = wordForm(values[handle], [



Comment posted by Yichu Lau

initially yes. But now i want to change the money slider to a input box and another slider will remain

Comment posted by Ezani

I couldn’t see any id (or name) tags for your controls. You should have them to identify each control. So for example, if the money slider has an id=money, just comment out the slider codes with that id, and replace with

Comment posted by Alexander Nied

A friendly “heads up”: while you may not yet have the ability to comment yet, it is generally frowned upon to create an answer just to make a comment on question.