// ==========================================================================
// Shorthand input range styling classes
// UNUSED.
// Originally developed for job title percentage selection.
// ==========================================================================


.field-range {

	&.noUi-horizontal {
		height: _rem($base-rhythm);

		.noUi-handle {
			width: _rem($base-rhythm * 2);
			height: _rem($base-rhythm * 2);
		}
	}

	.noUi-handle {
		background: map-get($colors, 10);
		border: none;
		border-radius: _rem($base-rhythm);
		box-shadow: none;
		cursor: pointer;
		outline: none;

		&:before {
			display: none
		}

		&:after {
			display: none
		}

	}

}

// ==========================================================================
// Shorthand input range styling classes
// UNUSED.
// Originally developed for job title percentage selection.
// ==========================================================================


.field-range {

	&.noUi-horizontal {
		height: _rem($base-rhythm / 2);

		.noUi-handle {
			width: _rem($base-rhythm * 1.5);
			height: _rem($base-rhythm * 1.5);
		}
	}

	&.noUi-target {
		background-color: map-get($colors, 10);
		border: none;
		box-shadow: none;
	}

	.noUi-handle {
		background: map-get($colors, 10);
		border: none;
		border-radius: _rem($base-rhythm);
		box-shadow: none;
		cursor: pointer;
		outline: none;
		top: -5px;

		&:before {
			display: none
		}

		&:after {
			display: none
		}

	}

}

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
	right: -10px;
}

Update styles on range slider
Update styles on range slider
