箭头jQuery的单杠

Question

任何人都可以给我建议一些jQuery的教程或者类似下图已经取得

箭头会指向这将是一个和之间的一些结果值的演示d。有没有其他的方法来做到这一点，jQuery的。使用谷歌图表API我可以得到箭头莫名其妙？

Answer 1

可以使用jquery-ui slider然后在CSS只是修改添加箭头

发现jQuery的用户界面的CSS中的.ui滑块，拉手，使moddified或添加边距和背景图像

前：

.ui-slider .ui-slider-handle 
{ 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 1.2em; 
    cursor: default; 
} 

变化：

.ui-slider .ui-slider-handle 
{ 
    margin-top:-20px; 
    background-image:url(ArrowDown.png); 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 1.2em; 
    cursor: default; 
} 

---

---

在主页

只需添加脚本的滑块：

$(function() { 
    $("#slider").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider").slider("value")); 
}); 

和HTML：

<p> 
    <label for="amount">Donation amount ($50 increments):</label> 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 

<div id="slider"></div> 

我使用了jQuery 1.5.1和jQuery UI的1.8.12也是它的作品，（不要忘了调用jquery.js，jquery-ui.js和jquery-ui.css）