infusion/dist/assets/css/TextfieldSlider.css

Infusion is an application framework for developing flexible stuff with JavaScript

.fl-textfieldSlider {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Textfield Stlying */

.fl-textfieldSlider .fl-textfieldSlider-textField {
    margin: 0;
    margin-left: 1rem;
    width: 2.5rem;
    text-align: center;
}

/* Slider Styling */

/*
Native slider appearance based on techniques described at
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
and
http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
*/

.fl-textfieldSlider input[type=range].fl-slider {
  -webkit-appearance: none;
  flex-grow: 1;
  margin: 0 1rem;
}

/* webkit browsers */
.fl-textfieldSlider input[type=range].fl-slider::-webkit-slider-runnable-track {
  height: 1rem;
  cursor: pointer;
  animate: 0.2s;
  background: #dad6d3;
  border-radius: 0.3rem;
  border: 1px solid #b3b3b3;
}
.fl-textfieldSlider input[type=range].fl-slider::-webkit-slider-thumb {
    height: 1.5rem;
    width: 1.5rem;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 2rem;
    box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
    background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
    -webkit-appearance: none;
    margin-top: -0.3rem;
}

/* Firefox */
.fl-textfieldSlider input[type=range].fl-slider::-moz-range-track {
  height: 1rem;
  cursor: pointer;
  animate: 0.2s;
  background: #dad6d3;
  border-radius: 0.3rem;
  border: 1px solid #b3b3b3;
}
.fl-textfieldSlider input[type=range].fl-slider::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 2rem;
    box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
    background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}

/* ms browsers */
.fl-textfieldSlider input[type=range].fl-slider::-ms-track {
  height: 1rem;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 0.5rem 0;
  color: transparent;
}
.fl-textfieldSlider input[type=range].fl-slider::-ms-fill-lower {
  background: #dad6d3;
  border: 1px solid #b3b3b3;
  border-radius: 0.3rem;
}
.fl-textfieldSlider input[type=range].fl-slider::-ms-fill-upper {
  background: #dad6d3;
  border: 1px solid #b3b3b3;
  border-radius: 0.3rem;
}
.fl-textfieldSlider input[type=range].fl-slider::-ms-thumb {
    height: 1.5rem;
    width: 1.5rem;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 2rem;
    box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
    background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}

/* Put focus on the slider thumb only */

.fl-textfieldSlider input[type=range].fl-slider:focus {
    outline: none;
}

.fl-textfieldSlider input[type=range].fl-slider:focus::-webkit-slider-thumb {
    outline: 2px solid black;
}

.fl-textfieldSlider input[type=range].fl-slider:focus::-moz-range-thumb {
    outline: 2px solid black;
}

.fl-textfieldSlider input[type=range].fl-slider:focus::-ms-thumb {
    outline: 2px solid black;
}