我正在使用此范围滑块,我出于某种原因无法设置样式,这是我的代码。我认为我需要为每个句柄滑块创建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);
答案 0 :(得分: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
类。
<强>更新强>
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;