JQuery의 JSlider에 인디케이터를 배치하는 방법은 무엇입니까?

Jquery 슬라이더가 있습니다. JQuery의 JSlider에 인디케이터를 배치하는 방법은 무엇입니까?

This is the output of above JQuery slider code

<link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css"/> 
    <script src="jquery-1.7.1.min.js"></script> 
    <script src="jquery-ui.min.js"></script> 
<STYLE> 
    #demo-frame > div.demo { padding: 1px !important; } 
    </STYLE> 

<SCRIPT> 
    $(function() { 
     $("#glider").slider({step:10, animate:true, min:0, max:100, value:50}); 


    }); 
    </SCRIPT> 

<DIV class=demo> 
<DIV id=glider></DIV></DIV>

어떻게 내가 0, 10, 20, 30 등의 각 단계에 약간의 홈을 넣을 열 개 값의 단계에 노치를 넣을 수 있습니다 ... .100. 어떻게해야합니까? 그것은 손잡이처럼 보이는

출처

2012-05-16 veer7

당신이 노치라고 할 때 명확히하기 위해, Satya의 답변에서와 같은 단계가 아니라 "시각적 노치"가 아닌가? –

@Alex : 값은 슬라이더의 이동식 노치를 배치합니다. 그러나 나는 그 같은 0,10,20 같은 마커를 넣어 soem 방법을 원해 – veer7

고마워요 @ veer7 그래서 단계가 그려진 시각적 인 마커의 일종? –

작동합니다

출처

2012-05-16 11:40:00

안녕하세요 @ veer7 당신이 솔루션을 찾을 수 있다면 jsfiddle에 게시 할 수 있다면 정말로 멋지 겠죠. –

사용 values: [0, 10,20 ] 그것의

<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a>

의 왼쪽 %를 사용 styleed되는 슬라이더를 포함하는 것 :

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a></div>

그래서 같은데요를 아마도 슬라이더 포인트를 추출하여 %를 계산 한 다음 동일한 %를 사용하여 마커 노치의 스타일을 지정할 수 있습니다.

나는 슬라이더를 백분율로 표시하는 방법을 파헤 치지 않고 확신 할 수 없기 때문에 전체 답변이 전체 답변이 아닌 것 같습니다. 아마도 jquery-ui 슬라이더의 축소되지 않은 버전을 살펴보고 백분율을 계산하는 방법을 살펴보십시오.

출처

2012-05-16 11:24:51 Satya

그냥 움직일 수있는 노치를 놓습니다. 나는 마커와 같은 것을 항상 원할 것입니다. – veer7

슬라이더의 CSS 속성을 확인하면 도움이 될 것입니다 – Satya

Satya. 그러나 솔직히 말해서 CSS에 대한 지식이 거의 없기 때문에 슬라이더에 대한 CSS의 참조를 얻을 수 있습니까? – veer7

JQuery의 JSlider에 인디케이터를 배치하는 방법은 무엇입니까?

답변

관련 문제