风格Jquery Range Slider

Question

我正在使用此范围滑块，我出于某种原因无法设置样式，这是我的代码。我认为我需要为每个句柄滑块创建ID。

      <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 -->

这是下面的java代码。我想要创建的是一个贷款滑块计算器，其中包含金额，另一个包含月份，样式ID类似于接近我的评论和链接，在评论部分下。

  (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

我的想法是为不同的Slider提供不同的ids，我们有来自jQuery slider的默认类。

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

您可以使用CSS中的ID和CLASS选择器为不同的滑块应用样式

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

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

为Slider-Handle应用样式使用#one.ui-slider-handle和#two.ui-slider-handle类。

<强>更新

＆＃13;

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;