<# var um_list = this.get_config( 'um' ); #>
<div class="control-grid slider wrap">
	<div class="label full-width">
		<span class="slider-label"><#= this.model.config.label || this.model.config.name || this.el.dataset.name#></span>
		<# if ( this.model.config.info ) { #>
		<span class="click tve-slider-info" data-fn="openTooltip"><?php tcb_icon( 'info-circle-solid' ); ?></span>
		<# } #>
	</div>
	<div class="fill mr-20">
		<input type="range" class="tve-slider input change" data-fn-change="onChange" data-fn-input="onInput" min="<#= this.model.config.min #>"
			   max="<#= this.model.config.max #>" value="<#= this.model.config.default #>"/>
	</div>
	<# if (!this.model.config.hide_input) { #>
	<div class="slider-input">
		<span class="input-um<#=um_list.length > 1 ? ' click' : ''#>"<#=um_list.length > 1 ? ' tabindex="2"' : ''#>><#= um_list[0] || '' #></span>
		<input type="text" class="tve-input input change width-input<#=this.model.config.um.length ? ' has-um' : ''#>" data-fn="onChange" data-fn-input="onInput"
			   value="<#= this.model.config.default #>">
		<div class="um-wrapper">
			<# if(this.model.config.um.length>1) { _.each(this.model.config.um, function(um, index) { #>
			<span class="tve-input-um mousedown <#= index==0?'active':'' #>" data-fn="umChange" data-value="<#= um #>"><#= um #></span>
			<# }); } #>
		</div>
	</div>
	<# } #>
</div>