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

我正在尝试创建一个范围滑动条。我尝试创建这种格式是为了让用户选择他们的预算，但我想用一种简单的方式来做。我将使用UIjQuery示例作为参考，但是有了它，您可以将范围栏滑动到任何需要的地方。我发现了一个我喜欢的例子，这就是我试图建模的方式：

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

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

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

$(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>

$（函数（）{
$（“#滑块”）.滑块({
范围：对，
数值：100，
分:0,，
最高：50000，
步骤：500，
幻灯片：功能（事件、用户界面）{
$（“#金额”）.val（$”+ui.value）；
}
});
$（“#金额”）.val（$”+$（“#滑块”）.slider（“值”）；
});

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

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