Create a range slider

[mldardy]

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.

[Martyr2]

Styles without the corresponding HTML to go with it is a bit useless. Do you have this up on a site where we can actually see your ranger slider? Are you styling a <div>? Are you styling an existing form element?

Maybe showing us what you have put together on a codepen or something can solicit more ideas.