具有美元/小时值的jquery范围滑块

我已经使用Jquery UI Slider制作了范围滑块，在下图中显示值。请检查这一点，但我并没有像在图中显示的那样在价格之前和价格之后获得$value和/hr

我尝试使用jquery UI滑块的内容如下，请为我提供更好的解决方案，我也找到了stackoverflow问题，但我没有找到解决方案

$（文档）.ready（函数（）{
var initialValues=[5401020]，
updateValue=函数（ui）{
var价格=ui.value；
$（ui.handle）.attr（'data-value'，price）；
};
$（“.slider range”）.slider({
分:0,，
最高：1440，
步骤：15，
范围：对，
数值：[5401020]，
创建：函数（事件、用户界面）{
$。每个（初始值、函数（i、v）{
更新值({
值：v，
句柄：$（'.ui滑块句柄'）.eq（i）
});
});
},
幻灯片：功能（事件、用户界面）{
更新值（ui）；
}
});
});
*：焦点{
大纲：0；}
.时间范围
{
填充：0 20px；
}
.ui滑块水平{
高度：8px；
背景#D7D7D7；
边框：1px实心#巴巴巴；
盒影：0 1px 0#FFF，0 1px 0#CFCFCF插图；
明确：两者皆有；
利润率：8px0；
-webkit边界半径：6px；
-moz边界半径：6px；
-ms边界半径：6px；
-o-边界半径：6px；
边界半径：6px；}
.ui滑块{
位置：相对位置；
文本对齐：左；}
.ui滑块水平.ui滑块范围{
顶部：-1px；
高度：100%；}
.ui滑块.ui滑块范围{
位置：绝对位置；
z指数：1；
高度：8px；
字体大小：.7em；
显示：块；
边框：1px实心#424453；
盒影：0 1px 0#edeef7插图；
-moz边界半径：6px；
-webkit边界半径：6px；
-khtml边界半径：6px；
边界半径：6px；}
.ui滑块.ui滑块句柄{
背景色：#424453；
宽度：18px；
高度：18px；}
.ui滑块.ui滑块句柄{
位置：绝对位置；
z指数：2；
宽度：18px；
高度：18px；
游标：默认值；
边界：无；
光标：指针；
背景：35; ff0000 50%50%无重复；}
.ui滑块水平.ui滑块手柄{
顶部：-.3em；
左边距：-.7em；}
.ui滑块句柄：在{
内容：attr（数据值）；
位置：绝对位置；
底部：-24px；
左：-20px；
最小宽度：60px；
字体大小：10px；
高度：20px；
颜色：#333；
填充：1px；
文本对齐：居中；}
.ui滑块a：焦点{
大纲：无；}
#滑块范围{
宽度：95%；
边距：0px；}
.时间范围{
宽度：100%；
利润率：10px 0px；
显示：block；}
.时间滑块标签{
显示：内联块；}
.滑块\u步骤1{
宽度：自动；}
#时间范围标签{
页边距顶部：10px；}
您可以通过
：元素之后的
内容
属性直接添加这些内容：

content: "$ " attr(data-value) " / Hr";

行更改：var price=“$”+ui.value+“/Hr”


$（文档）.ready（函数（）{
var initialValues=[5401020]，
updateValue=函数（ui）{
var price=“$”+ui.value+“/Hr”；
$（ui.handle）.attr（'data-value'，price）；
};
$（“.slider range”）.slider({
分:0,，
最高：1440，
步骤：15，
范围：对，
数值：[5401020]，
创建：函数（事件、用户界面）{
$。每个（初始值、函数（i、v）{
更新值({
值：v，
句柄：$（'.ui滑块句柄'）.eq（i）
});
});
},
幻灯片：功能（事件、用户界面）{
更新值（ui）；
}
});
});
*：焦点{
大纲：0；}
.时间范围
{
填充：0 20px；
}
.ui滑块水平{
高度：8px；
背景#D7D7D7；
边框：1px实心#巴巴巴；
盒影：0 1px 0#FFF，0 1px 0#CFCFCF插图；
明确：两者皆有；
利润率：8px0；
-webkit边界半径：6px；
-moz边界半径：6px；
-ms边界半径：6px；
-o-边界半径：6px；
边界半径：6px；}
.ui滑块{
位置：相对位置；
文本对齐：左；}
.ui滑块水平.ui滑块范围{
顶部：-1px；
高度：100%；}
.ui滑块.ui滑块范围{
位置：绝对位置；
z指数：1；
高度：8px；
字体大小：.7em；
显示：块；
边框：1px实心#424453；
盒影：0 1px 0#edeef7插图；
-moz边界半径：6px；
-webkit边界半径：6px；
-khtml边界半径：6px；
边界半径：6px；}
.ui滑块.ui滑块句柄{
背景色：#424453；
宽度：18px；
高度：18px；}
.ui滑块.ui滑块句柄{
位置：绝对位置；
z指数：2；
宽度：18px；
高度：18px；
游标：默认值；
边界：无；
光标：指针；
背景：35; ff0000 50%50%无重复；}
.ui滑块水平.ui滑块手柄{
顶部：-.3em；
左边距：-.7em；}
.ui滑块句柄：在{
内容：attr（数据值）；
位置：绝对位置；
底部：-24px；
左：-20px；
最小宽度：60px；
字体大小：10px；
高度：20px；
颜色：#333；
填充：1px；
文本对齐：居中；}
.ui滑块a：焦点{
大纲：无；}
#滑块范围{
宽度：95%；
边距：0px；}
.时间范围{
宽度：100%；
利润率：10px 0px；
显示：block；}
.时间滑块标签{
显示：内联块；}
.滑块\u步骤1{
宽度：自动；}
#时间范围标签{
页边距顶部：10px；}
检查此更新的JQuery


$（文档）.ready（函数（）{
var initialValues=[5401020]，
updateValue=函数（ui）{
var价格=ui.value；
$（ui.handle）.attr（'data-valu