Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

@import "bourbon/bourbon";
$neutral-light: #eee;
$primary: blue;
$secondary: green;

/* Functional styling * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.noUi-target {
	direction: ltr;
}
.noUi-base {
	width: 100%;
	height: 100%;
	position: relative;
}
.noUi-origin {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
}
.noUi-handle {
	position: absolute;
	z-index: 1;
}
.noUi-stacking .noUi-handle {
	z-index: 10;
}
.noUi-stacking + .noUi-origin {
	*z-index: -1;
}
.noUi-state-tap .noUi-origin {
	@include transition(left 0.3s, top 0.3s);
}
.noUi-state-drag * {
	cursor: inherit !important;
}

.noUi-base {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Slider size and handle placement */
.noUi-horizontal {
	height: 10px;

	.noUi-handle {
		top: -3px;
		left: -8px;
	}
}
.noUi-vertical {
	width: 10px;

	.noUi-handle {
		top: -8px;
		left: -3px;
	}
}

/* Styling */
.noUi-background {
	background: darken($neutral-light, 5%);
}
.noUi-connect {
	background: $secondary;
}
.noUi-origin {
	border-radius: 2px;
}

/* Handles and cursors */
.noUi-handle {
	@include size(16px);
	margin-bottom: 15px;
	background: $primary;
	border-radius: 80% 0 55% 50% / 55% 0 80% 50%;

	.tooltip span {
		position: absolute;
	}

	&.noUi-handle-lower {
		@include transform(rotate(45deg));

		.tooltip {
			@include transform(rotate(-45deg));

			span {
				top: 17px;
				right: 0;
			}
		}
	}

	&.noUi-handle-upper {
		@include transform(rotate(-135deg));

		.tooltip {
			span {
				top: 5px;
				left: 0;
			}
			@include transform(rotate(135deg));
		}
	}

	&.noUi-active {
		background: lighten($primary, 5%);
	}
}

/* Disabled state */
[disabled].noUi-connect,
[disabled] .noUi-connect {
	background: #B8B8B8;
}
[disabled] .noUi-handle {
	cursor: not-allowed;
}

SassMeister-output.css

/* Functional styling * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-target {
  direction: ltr;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
}

.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-handle {
  position: absolute;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
  z-index: 10;
}

.noUi-stacking + .noUi-origin {
  *z-index: -1;
}

.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s, top 0.3s;
  -moz-transition: left 0.3s, top 0.3s;
  transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-base {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement */
.noUi-horizontal {
  height: 10px;
}

.noUi-horizontal .noUi-handle {
  top: -3px;
  left: -8px;
}

.noUi-vertical {
  width: 10px;
}

.noUi-vertical .noUi-handle {
  top: -8px;
  left: -3px;
}

/* Styling */
.noUi-background {
  background: #e1e1e1;
}

.noUi-connect {
  background: green;
}

.noUi-origin {
  border-radius: 2px;
}

/* Handles and cursors */
.noUi-handle {
  height: 16px;
  width: 16px;
  margin-bottom: 15px;
  background: blue;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
}

.noUi-handle .tooltip span {
  position: absolute;
}

.noUi-handle.noUi-handle-lower {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.noUi-handle.noUi-handle-lower .tooltip {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.noUi-handle.noUi-handle-lower .tooltip span {
  top: 17px;
  right: 0;
}

.noUi-handle.noUi-handle-upper {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.noUi-handle.noUi-handle-upper .tooltip {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.noUi-handle.noUi-handle-upper .tooltip span {
  top: 5px;
  left: 0;
}

.noUi-handle.noUi-active {
  background: #1a1aff;
}

/* Disabled state */
[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #B8B8B8;
}

[disabled] .noUi-handle {
  cursor: not-allowed;
}