CODEWITHSUNDEEP
c#javascriptjqueryasp.net-mvcrazor
David Colwell
David Colwell

Reputation: 2590

Multi Handle Slider MVC

I am seeking to bind a multi handle slider to my model in MVC. The model looks like this

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;}
}

I want there to be 5 handles on the slider so that it looks something like this Slider Example from MS Paint

I don't mind if it binds to hidden fields or visible fields, but the values must be sent with the model on post. I am totally open to plugins, as long as you can demonstrate how they would attain my goals.

P.S. I am using the Razor view syntax, not Web Forms

Upvotes: 1

Views: 1422

Answers (1)

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

JQuery UI's slider is capable of rendering multiple slider handles. The trick is to ensure you set the "range" property to false. Then you can add as many values as you want in the values array property as follows:

$(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 ) );
  });

I've thrown together this JS Fiddle to illustrate.

As far as binding these values to your model is concerned, it should be a straight-forward task to set the values of some hidden elements or visible UI elements to the sliders' values and post these back.

Upvotes: 2

Related Questions