2017-06-12 129 views
0

我使用這個範圍滑塊,我只是不能因爲某種原因的樣式,這裏是我的代碼。我認爲這是要麼爲每個句柄滑塊創建id。風格jquery範圍滑塊

 <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代碼。我試圖創建的是一個貸款滑動計算器與金額和其他與月份,風格編號喜歡接近我的一個評論和鏈接,在評論部分。

(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

哪裏是js代碼 – Rahul

+0

而這正是我試圖實現與兩個手柄https://codepen.io/thebabydino/pen/OPzwzK – Luke

+0

如果你有更多的代碼顯示盧克,請將其添加到問題。我已經刪除了一些關於「幫助你解決問題」的問題,但我在這裏看不到具體的問題。你爲什麼不能塑造它?你遇到什麼麻煩? – halfer

回答

1

我的想法是不同的滑塊給出不同的ids,我們有缺省類從jQuery slider

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

您可以通過使用ID &類選擇從CSS

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

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

申請不同的滑塊樣式的滑蓋手柄使用#one.ui-slider-handle#two.ui-slider-handle類應用樣式。

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

+0

嗨,感謝您的幫助,請看這個鏈接.https://github.com/scrubmx/jquery.loan-calculator/blob/master/example.html這就是我想創建的https:// www .buddyloans.com/ – Luke

+0

好的。我會盡快更新代碼。感謝您的鏈接Luke – Prashee

+0

Luke!我更新了..如果我們需要兩種顏色的範圍控制,我們需要添加java腳本。示例[Fiddle](http://jsfiddle.net/JnrvG/1/)...我認爲它在Event上的顏色不是很好看。爲了更好的最終用戶體驗,我建議你使用[JQuery Slider](https://jqueryui.com/slider/) – Prashee