Create a range slider

bootsy0712 1 Reputation point

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:


.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);


.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.
30,275 questions
0 comments No comments
{count} votes