Multi Handle Slider MVC

Question

Я пытаюсь связать слайдер с несколькими дескрипторами в моей модели в MVC. Модель выглядит следующим образом

class Foo 
{ 
    public double Lowest{get;set;} 
    public double Low {get; set;} 
    public double Center {get; set;} 
    public double High {get; set;} 
    public double Highest {get; set;} 
} 

Я хочу там быть 5 ручки на ползунок так, что он выглядит примерно так

Я не возражаю, если он связывается с скрытых полей или видимых полей, но значения должны быть отправлены с моделью на столбе. Я полностью открыт для плагинов, пока вы можете продемонстрировать, как они достигнут моих целей.

P.S. Я использую синтаксис вида Razor, а не веб-формы

Answer 1

Ползунок JQuery UI способен отображать несколько слайдерных ручек. Хитрость заключается в том, чтобы установить свойство «range» на false. Затем вы можете добавить столько значения, сколько вы хотите в свойстве values массива следующим образом:

$(function() { 
    $("#slider-range").slider({ 
     range: false, 
     min: 0, 
     max: 500, 
     values: [ 75, 150, 300 ], 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
     " - $" + $("#slider-range").slider("values", 1)); 
    }); 

Я бросил вместе это JS Fiddle для иллюстрации.

Что касается привязки этих значений к вашей модели, это должна быть прямолинейная задача, чтобы установить значения некоторых скрытых элементов или видимых элементов пользовательского интерфейса для значений ползунков и отправить их обратно.