Create a range slider

Question

I am trying to create a range slider by adding classes/styles to the component and variable css files. I'm not sure what else I need besides what I have so far:

component.scss

.range-slider {
  background-color: var(--component-background);
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 25px; 
  background: #d3d3d3;
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: .2s; 
  transition: opacity .2s;
}

&--spaced {
  margin: var(--component-spaced-margin);
}

variable.scss

.range-slider {
  --component-background: pink;
  --component-spaced-margin: var(--linq-spacing-8) 0;
}

I need help with what I have in each scss file do I need more colors, padding, borders, margin and fonts. This is a pretty basic range slider but not sure if I have too much or too little.