slider handler

dabblet.css

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	font-size: 14px;
	background: #666674;
	position: relative;
}
.cursor {
	font-size: 10em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -0.5em 0 0 -0.37em;
	display: inline-block;
	background: #e1e4e7;
	background: linear-gradient(left, #e1e4e7, #fff 50%, #e1e4e7 50%, #fff);

	height: 1em;
	width: 0.75em;
	border-radius: 0 0 0.25em 0.25em / 0 0 0.2em 0.2em;
	box-shadow: 0 0.06em 0.2em #000;
}

.cursor:before {
	background: #e1e4e7;
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	content: '.';
	color: transparent;
	transform: rotate(45deg);
	overflow: hidden;
	top: -0.3em;
	left: 50%;
	margin-left: -0.3em;
	background: linear-gradient(45deg, #e1e4e7, #fff 50%, #e1e4e7 50%, #fff);
	z-index: 1;
	box-shadow: 0 0 0.1em #000;
	border-radius: 0 0.12em;
}

.cursor:after {
	content: '.';
	color: transparent;
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(top, #666270, #666270 20%, #fff 20%, #fff 40%, #666270 40%, #666270 60%, #fff 60%, #fff 80%, #666270 80%), linear-gradient(left, #e1e4e7, #fff 50%, #e1e4e7 50%, #fff);
	background-size: 50% 30%, 100% 100%;
	background-position: 50% 40%, 0 0;
	background-repeat: no-repeat;
	border-radius: 0 0 0.25em 0.25em / 0 0 0.2em 0.2em;
	z-index: 2;
}

dabblet.html

<span class="cursor-wrapper"><span class="cursor"></span></span>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}