[Javascript] nouislider.js - 製作簡單的 slider 來讓使用者開開心心的選範圍
2019-07-09
因為因為需要要做出 slider 讓用戶選範圍，之後我直覺地用以前經驗使用 jquery ui 中的 slider ，但是，我發現正常只取得一個數字還算 okay ，但是對於 range 型的，很多操作就怪怪的，之後我上網找了幾個套件，測試一下後來找到這個應該是最好的，之後我就是筆記一下，因為有很多參數可以設定
<!-- jquery --> <script src="https://no2js.azurewebsites.net/adminlte231/plugins/jQuery/jQuery-2.1.4.min.js"></script> <!-- noslider --> <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.1/nouislider.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.1/nouislider.min.js"></script>
1. 將 div 變成 range slider ，此案例 最小值 0 , 最大值 10
2.加入使用者事件，其中我放入兩個input 為 txtMin , txtMax ,使用者拖曳後會更新其值
3.加入刻度
官方案例都還蠻完整的，只是得一一測試，作個簡單筆記，之後要用時候可以快速複習，也推薦給大家