Select slider field

Field label

Option 1 Option 4

HTML

  	
<div class="form-field select-slider-field" data-options="Option 1,Option 2,Option 3,Option 4">
	
	
	<label for="select-slider-field">Field label</label>
	<div class="slider">
		<div class="slider__mercury"></div>
		<span class="slider__label-1">Option 1</span>
		<span class="slider__label-2">Option 4</span>
		<span class="slider__value"></span>
		<input class="slider__input" value="Option 2" id="select-slider-field" name="select-slider-field" type="text"   />
	</div>
</div>

SCSS

    @import './core';
@import './slider';

.select-slider-field {
	@include small-font;
	font-size: 16px;

	label {
		font-family: "Calibri", "Open Sans", "Helvetica", "Arial", sans-serif;
		font-size: 19px;
		font-weight: 400;
		line-height: 24px;
		color: #333f48;
	}

	.slider {
		position: relative;
		margin: 32px auto;
		box-shadow: inset 0 3px 0 0 $grey-L66;
	}

	.slider__input {
		@include hide-visually;
	}

	.slider__mercury {
		position: absolute;
		top: 0;
		left: 0;
		background-color: $coral;
		width: 0;
		height: 16px;
	}

	.slider__label-1 {
		position: absolute;
		bottom: -32px;
		left: 0;
	}

	.slider__label-2 {
		position: absolute;
		bottom: -32px;
		right: 0;
	}

	.slider__value {
		position: absolute;
		top: -32px;
		left: 0;
		display: block;
		width: 100%;
		font-weight: 700;
		text-align: center
	}

	// Override jQuery UI defaults
	.ui-slider {
		height: 18px;
		width: 100%;
		background-color: $white;
		border: 1px solid $grey-L35;
		border-radius: 0;

		.ui-slider-handle {
			top: -8px;
			margin-left: -16px;
			height: 32px;
			width: 32px;
			background-color: $white;
			border: 1px solid $grey-L35;
			border-radius: 50%;
		}
	}
}

Connect Dementia Research

Pattern Library

Select slider field

HTML

SCSS