style.css

.sliders {
    width: 300px;
 }
 .range-wrap {
 position: relative;
 margin: 0 auto 1rem;
 width: 50%;
 }
 .range {
 width: 100%;
 }
 .bubble {
 background: #b2001d;
 color: white;
 padding: 4px 12px;
 position: absolute;
 border-radius: 4px;
 left: 50%;
 transform: translateX(-50%);
 top: 76%;
 }
 .bubble::after {
 content: "";
 position: absolute;
 width: 2px;
 height: 2px;
 background: #b2001d;
 top: -1px;
 left: 50%;
 }
 input[type=range] {
   height: 25px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 input[type=range]:focus {
   outline: none;
 }
 input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 5px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000;
   background: #b2001d;
   border-radius: 1px;
   border: 0px solid #000000;
 }
 input[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 1px solid #b2001d;
   height: 18px;
   width: 18px;
   border-radius: 25px;
   background: #b2001d;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -7px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #b2001d;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
   height: 5px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000;
   background: #b2001d;
   border-radius: 1px;
   border: 0px solid #000000;
 }
 input[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 1px solid #b2001d;
   height: 18px;
   width: 18px;
   border-radius: 25px;
   background: #b2001d;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
   width: 100%;
   height: 5px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
   background: #b2001d;
   border: 0px solid #000000;
   border-radius: 2px;
   box-shadow: 0px 0px 0px #000000;
 }
 input[type=range]::-ms-fill-upper {
   background: #b2001d;
   border: 0px solid #000000;
   border-radius: 2px;
   box-shadow: 0px 0px 0px #000000;
 }
 input[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 0px #000000;
   border: 1px solid #b2001d;
   height: 18px;
   width: 18px;
   border-radius: 25px;
   background: #b2001d;
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
   background: #b2001d;
 }
 input[type=range]:focus::-ms-fill-upper {
   background: #b2001d;
 }
 .container {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 /* Hide the browser's default checkbox */
 .container input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }
 
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
 }
 
 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
 /* When the checkbox is checked, add a blue background */
 .container input:checked ~ .checkmark {
   background-color: #b2001d;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
 /* Show the checkmark when checked */
 .container input:checked ~ .checkmark:after {
   display: block;
 }
 
 /* Style the checkmark/indicator */
 .container .checkmark:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .distribution-name {
  width: 50%;
  margin: auto;
 }

 #figure {
  width: 50%;
  margin: auto;
 }