Có một plugin hoặc ví dụ về thanh trượt jquery hoạt động với các giá trị không chia đều không?

Question

Tôi đã tìm thấy hai plugin jquery tuyệt vời để tạo ra một thanh trượt cho một mẫu web, mà làm suy giảm độc đáo trong các trình duyệt không hỗ trợ javascript có phong cách tắt, vv

Đầu tiên là phiên bản Jquery.UI: http://ui.jquery.com/demos/slider/#steps

Phần tử thứ hai là phần tử chọn để trượt: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

Tuy nhiên, tôi cần tạo thanh trượt không chỉ chia thanh trượt thành phần bằng nhau.

Ví dụ chúng ta hãy nói rằng tôi có phạm vi sau đây các con số:

800,1000,1100,1200,1300,1400,1500

Tôi muốn thanh trượt để có một khoảng cách lớn giữa đẹp 800 và 1000 khoảng trống sau đó nhỏ hơn giữa 1100-1500

Vì vậy, các thanh trượt sẽ nhìn một chút như thế này:

800 ---- 1000--1100--1200--1300--1400--1500

Tốt hơn là tôi muốn nó xuống cấp xuống, vì vậy câu hỏi là có ai biết một plugin hỗ trợ điều này hay có bất kỳ đề xuất nào cho cách tốt nhất để đạt được điều này, tùy chỉnh cuộn filamentgroup cuộn của riêng tôi, v.v.

Cập nhật: Được hack về với thanh trượt của nhóm filament và nó thực hiện các xử lý thông qua thanh trượt của giao diện người dùng JQuery anyway. Vì vậy, nó trông giống như modding JQuery.UI tự của nó là lựa chọn duy nhất có sẵn. Sẽ khai thác trong mã để xem tôi có thể tìm bit cần thiết cần thay đổi không. Nếu trong khi đó bất cứ ai có bất kỳ ý tưởng !!!

Answer 1

Bạn có thể làm điều đó bằng thanh trượt jquery bằng cách hooking vào sự kiện trượt (có hiệu quả trọng nó) ... Một cái gì đó như thế này:

$(function() { 
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100]; 
    var slider = $("#slider").slider({ 
     slide: function(event, ui) { 
      var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; 
      var includeRight = event.keyCode != $.ui.keyCode.LEFT; 
      slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value)); 
      return false; 
     } 
    }); 
    function findNearest(includeLeft, includeRight, value) { 
     var nearest = null; 
     var diff = null; 
     for (var i = 0; i < values.length; i++) { 
      if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) { 
       var newDiff = Math.abs(value - values[i]); 
       if (diff == null || newDiff < diff) { 
        nearest = values[i]; 
        diff = newDiff; 
       } 
      } 
     } 
     return nearest; 
    } 
}); 

nên làm việc cho những gì bạn mô tả ... Tôi đã thử nghiệm nó để kéo bằng chuột & bằng cách sử dụng các phím trái/phải/nhà/kết thúc (rõ ràng bạn cần phải thay đổi từ trái/phải sang lên/xuống nếu bạn muốn có thanh trượt dọc).

Một số lưu ý:

• Rõ ràng là mảng các giá trị là bất cứ điều gì bạn muốn bước cho mục đích của bạn.
• Cũng rõ ràng, mã trên giả định một div có id là "thanh trượt" để hoạt động.
• Nó có thể sẽ làm việc kỳ lạ nếu giá trị tối thiểu/tối đa của bạn không giống như giá trị tối thiểu/tối đa của thanh trượt (tôi khuyên bạn chỉ nên sử dụng "min: values ​​[0], max: values ​​[values.length - 1 ] "làm tùy chọn tối thiểu/tối đa của bạn trên thanh trượt & thì bạn phải luôn an toàn). Rõ ràng là tùy chọn này sẽ không làm giảm danh sách thả xuống, nhưng nó sẽ rất dễ dàng để làm ... chỉ đơn giản là đưa ra lựa chọn của bạn như một danh sách thả xuống bình thường (mặc định trạng thái không javascript) & sau đó sử dụng jquery để ẩn danh sách thả xuống và cũng tạo mảng giá trị của bạn dựa trên các tùy chọn. Sau đó, bạn chỉ có thể cập nhật danh sách thả xuống (ẩn) cùng lúc khi bạn cập nhật thanh trượt trong mã ở trên, để khi biểu mẫu của bạn đăng, giá trị chính xác sẽ được chọn trong danh sách thả xuống.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Trong Es6 bạn có thể tìm số gần nhất của bạn bằng cách làm theo ..

function findClosest(array, value) { 
 
    return array.sort((a, b) => Math.abs(value - a) - Math.abs(value - b))[0]; 
 
} 
 

 
let array = [1, 5, 10, 28, 21]; 
 
let v = 4; 
 
let number = findClosest(array, v); // -> 5