2013-01-21 5 views
4

검도 슬라이더를 사용하고 있습니다. 내 요구 사항은 모든 슬라이더 값 변경에 대해 검도 슬라이더 배경색을 변경해야한다는 것입니다. 슬라이더의 배경을 변경하려면검도 슬라이더 배경색?

답변

3

, 당신은 같은 작업을 수행 할 수 있습니다

내가 0100과 전류 값을 읽을 change 핸들러를 정의 사이 값으로 슬라이더를 정의하는 했는가
$("#slider").kendoSlider({ 
    orientation: "vertical", 
    min: 0, 
    max: 100, 
    smallStep: 1, 
    largeStep: 20, 
    showButtons: true, 
    change: function (e) { 
     var top = $("#slider").closest(".k-slider-wrap"); 
     if (e.value < 33) { 
      $(".k-slider-track", top).css("background-color", "#ff0000"); 
      $(".k-slider-selection", top).css("background-color", "#ff0000"); 
     } else if (e.value < 66) { 
      $(".k-slider-track", top).css("background-color", "#00ff00"); 
      $(".k-slider-selection", top).css("background-color", "#00ff00"); 
     } else { 
      $(".k-slider-track", top).css("background-color", "#0000ff"); 
      $(".k-slider-selection", top).css("background-color", "#0000ff"); 
     } 
    } 
}); 

(e.value) 값에 따라 슬라이드의 배경을 정의하십시오.

중요한 점은 다음과 같습니다

  1. k-slider-selection는 선택한 슬라이드의 부분에 대한 CSS 클래스입니다.
  2. k-slider-track은 전체 슬라이드의 CSS 클래스입니다.

예 : 값이 33 인 경우, 전체 범위 (0-100)

+0

k-slider-track 제가 동일한 문제가 있지만 I 한 페이지에 복수의 슬라이더를 가지고있는 동안 0-33 용 슬라이더 부분 k-slider-selection이다. 클래스 선택기를 사용하는 동안 솔루션에 따라 모든 슬라이더의 색상이 변경됩니다. 변경 이벤트를 발생시킨 슬라이더의 색만 변경할 수 있기를 원하십니까? – haroonxml

+0

네, 클래스 선택기를 사용하고 있지 않습니다 **하지만'$ ("# slider")와 가장 근접한 (". k-slider-wrap")''top ' # slider'. – OnaBai

+0

네, 맞습니다. – haroonxml

관련 문제