Javascript 如何使滑块长度缩短并显示在页面中心？

现在我有一个从0到100的滑块。但是，它显示在页面顶部，占据页面的整个宽度。我想缩短滑块的长度，使其在页面上居中。谢谢大家!

这就是我到目前为止所做的：

---

只需使用CSS设置样式即可：

$（函数（）{
变量句柄=$（“#自定义句柄”）；
$（“#滑块”）.滑块({
创建：函数（）{
handle.text（$（this.slider（“value”））；
},
幻灯片：功能（事件、用户界面）{
handle.text（ui.value）；
}
});
} );
#自定义句柄{
宽度：3em；
高度：1.6em；
最高：50%；
边缘顶部：-.8em；
文本对齐：居中；
线高：1.6em；
}
/*将滑块宽度设置为所需的宽度，然后
通过将两个边距设置为“自动”，使div居中*/
#滑块{宽度：200px；边距：自动；}

jQuery UI滑块-自定义句柄

<meta name="viewport" content="width=device-width, initial-scale=1">