Create a range slider

bootsy0712 1 Reputation point
2021-07-07T21:13:29.59+00:00

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.

Not Monitored
Not Monitored
Tag not monitored by Microsoft.
25,339 questions
No comments
{count} votes