Ion.RangeSlider 2.0.3

Question

을 나는 Ion.RangeSlider 2.0.3

URL를 사용하려고 해요 : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

그래서 내가 세 가지 색상으로 그 슬라이더를 수정할. 왼쪽, 중간, 오른쪽. 나는 내가 원하는 것을 얻기 위해이 이미지를 첨부했다.

그래서 난이 슬라이더를 사용자 정의 할 당신의 도움이 필요합니다.

감사합니다.

Answer 1

수 있습니다. 다음은 관련 CSS와 자바 스크립트 코드 세그먼트입니다. 하자 지금 여기

CSS

.irs-line-left { 
    background: #66b032; 
    width: 60%; 
} 

.irs-line-mid { 
    background: #FFBF00; 
} 

.irs-line-mid:before { 
    content: ''; 
    background-color: #FF0000; 
    position: absolute; 
    left: 54%; 
    top: 0; 
    right: 0; 
    bottom: 0; 
} 

.budget-page .irs-line-right { 
    background: #FF0000; 
    width: 40%; 
} 

.budget-page .irs-line-mid { 
    width: 0 !important; 
} 

.irs-bar { 
    background: #FFBF00; 
} 

이 트릭 후, 나는 왼쪽 녹색, 중간 노란색과 오른쪽 빨간색 싶은 말은. 두 점을 변경하면 색상 폭을 동적으로 변경하기 위해 좌우 폭을 변경해야합니다.

자바 스크립트 섹션.

var iri_line_left = $(".irs-line-left"); 
var iri_line_right = $(".irs-line-right"); 

$("#color-slider").ionRangeSlider({ 
     type: "double", 
     min: 0, 
     max: 100, 
     from: 60, 
     to: 80, 
     grid: true, 
     onChange: function (data) { 
      var leftWidth = Math.ceil(data.from_percent); 
      var rightWidth = 100 - leftWidth; 

      // set left side width 
      iri_line_left.css({ 'width': leftWidth + "%" }); 

      // set right side width 
      iri_line_right.css({ 'width': rightWidth + "%" }); 

     } 
    }); 

희망이 도움이 될 것입니다.

Answer 2

내가 비슷한 일을했다 잘

.irs-line { 
// needs latest Compass, add '@import "compass"' to your scss 
@include background-image(linear-gradient(left, #32ff6c 0%,#28ff57 33%,#207cca 33%,#2989d8 66%,#ff3030 66%,#ff0000 100%)); 
}