2013-08-07 5 views
1

MVC에서 멀티 핸들 슬라이더를 내 모델에 바인딩하려고합니다. 이 모델은, 나는 그것이 숨겨진 필드 또는 표시 필드에 결합하면 난 상관 없어이 Slider Example from MS Paint멀티 핸들 슬라이더 MVC

같은 것을 보이도록 슬라이더에 5 개 핸들이있을 싶어이

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

처럼 보인다 그러나 값은 게시물에서 모델과 함께 보내야합니다. 내 목표를 달성하는 방법을 보여줄 수있는 한, 나는 플러그인에 완전히 열려있다.

P. Web Forms가 아닌 Razor보기 구문을 사용 중입니다.

+0

타사 슬라이더를 사용하고 있습니까? – ataravati

+0

어떤 슬라이더를 사용할지 또는 자체 슬라이딩을 조사 중입니다. jQueryUI 슬라이더에는 2 개의 핸들 만있는 것으로 보이며 ajax 컨트롤 툴킷은 MVC와 쉽게 호환되지 않습니다 –

+0

jQuery UI는 여러 슬라이더 핸들을 수행 할 수 있습니다. 아래 내 대답을 참조하십시오. –

답변

3

JQuery UI의 슬라이더는 여러 슬라이더 핸들을 렌더링 할 수 있습니다. 트릭은 "범위"속성을 false으로 설정하는 것입니다. 내가 함께 발생했습니다

$(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는 설명하기 위해 다음과 같이 당신이 values 배열 속성에 원하는대로 당신은 많은 값을 추가 할 수 있습니다.

이러한 값을 모델에 바인딩하는 것과 관련하여 숨겨진 요소 또는 보이는 UI 요소의 값을 슬라이더 값으로 설정하고 다시 게시하는 작업은 간단해야합니다.

+0

그래서 ... 간단! 고마워! –

관련 문제