创建具有固定范围的范围滑动条

Question

我正在尝试创建一个范围滑动条。我试图创建的格式是让用户选择他们的预算，但我想以一种简单的方式这样做。我使用ui Jquery示例作为参考，但有了这个，您可以在任何地方滑动范围栏。我找到了一个我喜欢的例子，这就是我试图对此进行建模的方法：

http://isadoradesign.com/web-design-company-discuss

您将在右侧的块之后看到滑块。

最终，我希望能够选择滑块上的某些点来设置预算。我不希望用户拖动滑动条。

到目前为止，我所做的是：

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


<div id="slider"></div>
<p>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

我正在使用jQuery css smoothness链接来创建滑块，但有人会推荐另一种方法我可以自己设计滑块而不是使用jQuery的插件css吗？

在下面的评论中，我将附上一个JSfiddle与我的工作到目前为止（我不知道如何将外部源上传到代码段）。