style Jquery Range Slider

Question

I am using this range slider and I just cannot style it for some reason, here is my code. I think it's either I need to create ids for each handle slider.

      <div class="col-lg-6 col-sm-6">
      <div class="form-group">
      <label for="payment-frequency">Payment frequency: </label> <span id="selected-payment-frequency"></span>
      <select id="payment-frequency" class="form-control">
      <option value="weekly">Weekly</option>
      <option value="biweekly">Biweekly</option>
      <option value="monthly" selected>Monthly</option>
      </select>
      </div>

      <div class="form-group">
      <label for="credit-score">Credit Score:</label> <span id="selected-score"></span>
      <select id="credit-score" class="form-control">
      <option value="A" selected>A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
      <option value="G">G</option>
      </select>
      </div>

      <ul>
      <li>Loan total: <span id="loan-total"></span></li>
      <li>Interest total: <span id="interest-total"></span></li>
      <li>Payment: <span id="payment"></span></li>
      <li>Service fee: <span id="service-fee"></span></li>
      <li>CAT: <span id="total-annual-cost"></span></li>
      <li>Grand total: <span id="grand-total"></span></li>
      </ul>
      <hr>
      </form>
      </div>
      </div></div>
      </div><!-- col-sm-10 -->
      </div><!-- row -->
      </div><!-- container -->

This is the java code below. What i am trying to create is a Loan slider calculator one with the amount and the other with the month, the style id like to get close to my one comment and link, under the comments section.

  (function($){

    // Accepts arguments as strings
    $calculator = $('#widget').loanCalculator({
      loanAmount       : 7500.00,
      loanDuration     : '60',
      valueAddedTax    : '43.8%',
      serviceFee       : '0%',
      paymentFrequency : 'monthly'
    });

    // Can also take numbers as arguments...
    $calculator.loanCalculator('update', {
      loanAmount       : 7500.00,
      loanDuration     : 60,
      valueAddedTax    : 43.8,
      serviceFee       : 0.00,
      paymentFrequency : 'monthly'
    });

    // Generate amortization schedule as json.
    var getAmortizationSchedule = function () {
      var scheduleData = $calculator.loanCalculator('schedule');
      return JSON.stringify(scheduleData, undefined, 2);
    };

    // Dump the schedule in the DOM
    var $schedule = $('#amortization').html(getAmortizationSchedule());

    // Event handler for the update method.
    $calculator.on('loan:update', function() {
      $schedule.html(getAmortizationSchedule());
    });

  })(jQuery);

Answer 1

My idea is give different ids for different Slider and we have default classes from jQuery slider.

<div id="one" class="ui-slider">First Slider Code</div>
<div id="two" class="ui-slider">Second Slider Code</div>

You can Apply styles for different sliders by using ID&CLASS Selectors from CSS

#one.ui-slider {
color: red;
width: 200px;
}

#two.ui-slider {
color: blue;
width: 150px;
}

For Applying Styles for Slider-Handle use #one.ui-slider-handle and #two.ui-slider-handle classes.

UPDATE:

input[type=range] {
  height: 42px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 19px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #6DCFF6;
  background: #6DCFF6;
  border-radius: 7px;
  border: 0px solid #6DCFF6;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #F4B01E;
  border: 1px solid #F4B01E;
  height: 35px;
  width: 50px;
  border-radius: 10px;
  background: #F4B01E;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #6DCFF6;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 19px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #6DCFF6;
  background: #6DCFF6;
  border-radius: 7px;
  border: 0px solid #6DCFF6;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #F4B01E;
  border: 1px solid #F4B01E;
  height: 35px;
  width: 50px;
  border-radius: 10px;
  background: #F4B01E;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 19px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #6DCFF6;
  border: 0px solid #6DCFF6;
  border-radius: 14px;
  box-shadow: 1px 1px 1px #6DCFF6;
}
input[type=range]::-ms-fill-upper {
  background: #6DCFF6;
  border: 0px solid #6DCFF6;
  border-radius: 14px;
  box-shadow: 1px 1px 1px #6DCFF6;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #F4B01E;
  border: 1px solid #F4B01E;
  height: 35px;
  width: 50px;
  border-radius: 10px;
  background: #F4B01E;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #6DCFF6;
}
input[type=range]:focus::-ms-fill-upper {
  background: #6DCFF6;
}

<input type="range" id="loan-amount" min="1000" max="100000" step="1000" value="2000">

<input type="range" id="loan-duration" min="6" max="24" step="1" value="12">