ember-aria-slider/addon/styles/app.css

An accessible slider component in Ember based on WAI-ARIA practices

/* CSS Document */
:root {
    --slider-bg: #eee;
    --slider-border: #888;
    --slider-thumb-border: var(--slider-border);
    --slider-thumb-top-border: #666;
    --slider-thumb-left-border: var(--slider-thumb-top-border);
    --slider-thumb-bg: #ddd;
    --slider-thumb-active-bg: #def;
    --slider-thumb-active-outline: #888;
    --slider-active-bg: #aaa;
}

.aria-widget-slider {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 4em;
}

.aria-widget-slider .rail {
    margin: 2px;
    padding: 1px;
    background-color: var(--slider-bg);
    border: 1px solid var(--slider-border);
    position: relative;
    top: 2em;
    height: 4px;
    width: 300px;
}

.aria-widget-slider .thumb  {
    border: 1px solid var(--slider-thumb-border);
    border-top-color:  var(--slider-thumb-top-border);
    border-left-color: var(--slider-thumb-left-border);
    background-color: var(--slider-thumb-bg);
    position: relative;
    width:8px;
    height:28px;
    top:-14px;
}

.aria-widget-slider .rail .thumb.focus,
.aria-widget-slider .rail .thumb:hover {
    outline: 2px solid var(--slider-thumb-active-outline);
    background-color: var(--slider-thumb-active-bg);
}

.aria-widget-slider .rail.focus {
    background-color: var(--slider-active-bg);
}

.aria-widget-slider .value  {
    width:      2em;
    text-align: right;
    position: absolute;
    left: 310px;
    top: -5px;
}