title: $:/core/procedures/sliders
code-body: yes

\procedure editor-preview-slider(class:"",width:"100%",
minHeight:"10px",template:"",
mode:"block",sliderWidth:"12px",
padding:"12px",
leftMinWidth:"0%",rightMinWidth:"0%")

\import $:/core/procedures/sidebar-resizer
\function set.throttling() yes
\function get.left.minwidth() [<leftMinWidth>]
\function get.right.minwidth() [<rightMinWidth>]
\function get.story-padding.right() 0px
\function get.story-padding.left() 0px
\function get.story.left() 0
\function drag.direction.reverse() no
\whitespace trim

<$let
	tv-set-storywidth-storyright="no"
	tv-set-sidebarwidth="yes"
	tv-set-centralised="no"
	storyLeftTiddler={{{ [<storyLeftTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}
	storyRightTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]] }}}
	sidebarWidthTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]] }}}
	tiddlerWidthTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]] }}}
	storyWidthTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
	storyMinWidthTiddler={{{ [<storyMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
	sidebarMinWidthTiddler={{{ [<sidebarMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]] }}}
	storyPaddingLeftTiddler={{{ [<storyPaddingLeftTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]] }}}
	storyPaddingRightTiddler={{{ [<storyPaddingRightTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>

	<$transclude
		$variable="editor-resizer"
		template=<<template>>
		eventCatcherClass="tc-editor-preview-eventcatcher"
		mode=<<mode>>
	/>

</$let>
\end

\procedure two-cell-slider(
templateLeft:"",templateRight:"",
width:"100%",minHeight:"22px",
mode:"block",sliderWidth:"12px",
padding:"12px",leftMinWidth:"100px",
rightMinWidth:"100px",id:"1")

\import $:/core/procedures/sidebar-resizer
\function get.resizer.style.position() absolute
\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
\function get.resizer.style.left() [[clamp(]addsuffix<leftMinWidth>addsuffix[,]addsuffix[calc(100% - ]addsuffix<get.template-right.width>addsuffix[),calc(100% - ]addsuffix<rightMinWidth>addsuffix[))]]
\function get.resizer.style.width() [<sliderWidth>]
\function set.throttling() no
\function get.modulo.minwidth(width) [<id>remainder[3]match[1]then<width>multiply[2]else<width>multiply[1]] :map[get.value.metric<width>addprefix<currentTiddler>]
\function get.left.minwidth() [get.modulo.minwidth<leftMinWidth>]
\function get.right.minwidth() [get.modulo.minwidth<rightMinWidth>]
\function drag.direction.reverse() no
\whitespace trim

<div
	style.width=<<width>>
	style.min-height=<<minHeight>>
	style.display="flex"
	style.flex-direction="column"
	style.padding-left=<<padding>>
	style.padding-right=<<padding>>
	style.padding-top=<<padding>>
	style.padding-bottom=<<padding>>
>

	<$let
		tv-set-storywidth-storyright="no"
		tv-set-sidebarwidth="yes"
		tv-set-centralised="no"
		storyLeftTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]addsuffix<id>] }}}
		storyRightTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]addsuffix<id>] }}}
		sidebarWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]addsuffix<id>] }}}
		tiddlerWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]addsuffix<id>] }}}
		storyWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]addsuffix<id>] }}}
		storyMinWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]addsuffix<id>] }}}
		sidebarMinWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]addsuffix<id>] }}}
		storyPaddingLeftTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]addsuffix<id>] }}}
		storyPaddingRightTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]addsuffix<id>] }}}>
		
		<$transclude
			$variable="sidebar-resizer"
			templateLeft=<<templateLeft>>
			templateRight=<<templateRight>>
			mode=<<mode>>
		/>
	
	</$let>

</div>
\end