微信小程序中滑块横向滚动选择时间段

Question

如图，滑动下边的两个小图标，图上的黑色区域随之发生变化，且时间段后边的文字也发生变化，当下边显示全天的switch组件选中，则上面显示24个小时，否则仅显示早8点到晚8点的时间，当选中的时间为10点到16点，则无论switch组件是否选中都正确显示10点到16点的时间段