/*
    Developed from the ResidentWAFSynthHost midiSlider class, which was developed
    beginning at the following two sites:
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider
    https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 
    The speedSlider class is to be used in html as follows:
    <div>
        <input type="range" class="speedSlider" id="myRange" min="0" max="127" value="64">
    </div>
*/

.speedSlider
{
    -webkit-appearance: none;
    width: 176px; /* was 262px; or (2*127) + thumb width */
    height: 13px;
    margin-right: 4px;
    outline: none;
    background: #eee; /* was aaa */
    border-style: solid;
    border-width: 1px;
    border-color: #444;
    vertical-align: middle;
    opacity: 0.7; /* was 0.4 */
    -webkit-transition: .1s;
    transition: opacity .1s;
}

.speedSlider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    width: 6px;
    height: 11px;
    background: #000;
    cursor: pointer;
}