Javascript 如何使用CSS自定义滑动条

我已经创建了显示在html页面顶部的滑块，但我需要它显示在底部和水平滑动条上 应减少到其大小的一半，并且我希望将值从（0-100）限制为（最小值：1-最大值：25） 我是新来的css，我不知道如何做到这一点，有人可以帮助我。我也上传了完整的代码

$（函数（）{
变量句柄=$（“#自定义句柄”）；
$（“#滑块”）.滑块({
创建：函数（）{
handle.text（$（this.slider（“value”））；
},
幻灯片：功能（事件、用户界面）{
handle.text（ui.value）；
}
});
});
#自定义句柄{
宽度：3em；
高度：1.6em；
最高：50%；
边缘顶部：-.8em；
文本对齐：居中；
线高：1.6em；
}
要设置滑块的最小值和最大值，请执行以下操作：

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    min: 1,               //<--------Min
    max: 25,              //<-------Max
create: function() {
  handle.text($(this).slider("value"));
},
slide: function(event, ui) {
  handle.text(ui.value);
}
  });
});

演示：
给你，你需要的一切！
$（函数（）{
变量句柄=$（“#自定义句柄”）；
$（“#滑块”）.滑块({
民:1,，
最高：25，
创建：函数（）{
handle.text（$（this.slider（“value”））
},
幻灯片：功能（事件、用户界面）{
handle.text（ui.value）；
}
});
});
#自定义句柄{
宽度：3em；
高度：1.6em；
最高：50%；
边缘顶部：-.8em；
文本对齐：居中；
线高：1.6em；
}
#滑块{
宽度：50%；
位置：绝对位置；
底部：0；
左：0；
右：0；
保证金：0自动；
}
要设置最小/最大值，只需在创建幻灯片时添加这些属性……请检查
#slider {
  width:50%; /*make it half its width*/
  position:absolute; /*allow you to position it at the bottom*/
  bottom:20px; /*how far from the bottom*/
  left:20px; /* how far from the left*/
}