<import-sjs from="./index.sjs" name="sliderSjs" /> <template name="slider-handler"> <view class="ant-slider-handler" style="left: {{ position }}%"> <popover placement="top" visible="{{ showTooltip }}" showMask="{{ false }}"> <slot name="slider"> <view class="ant-slider-handler-block"> <view class="ant-slider-handler-icon-default"> <view class="ant-slider-handler-icon-default-line1" /> <view class="ant-slider-handler-icon-default-line2" /> <view class="ant-slider-handler-icon-default-line3" /> </view> </view> </slot> <view slot="content" class="ant-slider-tooltip-content"> <slot name="tooltip" value="{{ value }}"> {{ value }} </slot> </view> </popover> </view> </template> <view class="ant-slider {{ className ? className : '' }}" style="opacity: {{ disabled ? '0.4' : '1' }};"> <view class="ant-slider-track {{ showNumber ? 'ant-slider-track-number' : '' }}"> <view class="ant-slider-track-touch-area" id="ant-slider-id-{{ $id }}" onTouchStart="handleTrackTouchStart" onTouchEnd="handleTrackTouchEnd" onTouchMove="handleTrackTouchMove"> <view class="ant-slider-track-fill"> <view class="ant-slider-track-fill-background" /> <view class="ant-slider-track-fill-front {{ activeLineClassName || '' }}" style="width: {{ sliderWidth }}%; left: {{ sliderLeft }}%; {{ activeLineStyle || '' }}" /> <view class="ant-slider-showTicks"> <block a:for="{{ tickList }}" a:for-index="index" a:for-item="item"> <view class="ant-slider-tick ant-slider-tick-{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) ? 'front' : 'back' }} {{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotClassName ? activeDotClassName : '' }}" style="left: {{ item.left }}%;{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotStyle ? activeDotStyle : '' }}"> <view a:if="{{ showNumber }}" class="ant-slider-tick-number"> <slot name="tick" value="{{ item.value }}"> {{ item.value }} </slot> </view> </view> </block> </view> <template a:if="{{ range }}" is="slider-handler" data="{{ position: sliderLeft, icon: icon, value: mixin.value[0], showTooltip: changingStart && showTooltip }}" /> <template is="slider-handler" data="{{ position: sliderLeft + sliderWidth, icon: icon, value: range ? mixin.value[1] : mixin.value, showTooltip: changingEnd && showTooltip }}" /> </view> </view> </view> <view /> </view>