custom style the slider

```
/***** Chrome, Safari, Opera, and Edge Chromium *****/
/*Range Reset*/
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 15rem;
}

/* Removes default focus */
input[type="range"]:focus {
outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
background-color: #007A82;
border-radius: 0.5rem;
height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -6px; /* Centers thumb on the track */

/*custom styles*/
background-color: #F5532D;
height: 20px;
width: 20px;
border-radius: 50%;
}

input[type="range"]:focus::-webkit-slider-thumb {
border: 1px solid #053a5f;
outline: 3px solid #053a5f;
outline-offset: 0.125rem;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #053a5f;
border-radius: 0.5rem;
height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
border: none; /*Removes extra border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/

/*custom styles*/
background-color: #5cd5eb;
height: 2rem;
width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
border: 1px solid #053a5f;
outline: 3px solid #053a5f;
outline-offset: 0.125rem;
}
```

No file or test is named. Locate the slider's range input and its existing styles, then use the supplied browser-specific CSS as the styling reference. Done means the slider has the requested custom track, thumb, focus treatment, and cross-browser styling.

Written by the indexing model from the issue text.