Basic Styling

"If you're going to do something, do it with style!" - Jason Statham.

Silverlight has a distinctive look which makes it's controls look kind of silver. In contrast, basic HTML controls have a different look on each browser. This guide will show how to use basic SCSS rules to homogenize a control appearance and make it look more like Silverlight.

This guide builds up on the How to support and Bindings guide. It assumes that basic support for Slider control is already implemented on WebMAP Silverlight packages repository.

Source code

The source code for the legacy Silverlight example and migrated application used through this guide is available on the resources section.

Slider legacy style

The slider style on Silverlight is full of details. Using Web terminology, a slider is made of two parts: the track, which is the bar that goes from left to right, and the thumb, which is the piece that you drag along the track.

Looking closer, the default track height is 3px. The thumb default size is 11px wide and 18px tall.

Furthermore, the track has a gray round border, filled with a lighter gray-blue color. The thumb has a complex coloring: the border also has round borders, with a linear gradient from light gray at the top to a darker gray at the bottom. The thumb is also filled with a linear gradient which goes from almost white (top) to light gray (bottom). And the thumb filling is surrounded by a white border.

That is enough details for now. Let's see the appearance of a default slider on a migrated app.

Migrated application

Unfortunately, the slider component will have a different look depending on the browser and browser version on which the migrated application is run:

Browser

Slider Look

Chrome (v. 105.0.5195.127)

Edge (v. 105.0.1343.50)

Firefox (v. 105.0.1)

None of them looks like Silverlight. Fortunately a little bit of CSS (or SCSS to be more precise) can be used to homogenize the slider look, and bring it closer to Silverlight appearance.

Component style sheet

Silverlight offered quite a few ways to change the style of a control. When the application is migrated, even more options are available. If you want to learn about those options you check them out on How to Modify Styles guide. On this guide the component style sheet will be used to adapt the slider component appearance.

On the migrated application, the component style sheet uses SCSS to define style rules. If you are not familiar with SCSS, you can read about Sass Basics to get a feeling on SCSS language.

On the i-components repository, open the slider component style sheet and add the following selectors and rules:

slider.component.scss

input[type=range] {
  appearance: none;  // Remove slider default style
  background: transparent;

  &::-webkit-slider-thumb {
    appearance: none;  // Remove thumb default style
  }
}

The appearance rule will remove any default style on the input range. The ::-webkit-slider-thumb pseudo-element selector will select the thumb part of the slider, but only on Chrome based browsers. Sadly, pseudo-element selectors for the slider parts are not standardized across browsers, so let's focus on Chrome first. The result is a slider with no default style, so nothing visible is rendered.

Build i-components, copy it into the migrated application and try out the new style:

This is a great start, because now the default style will not interfere. Now it is time to style the thumb.

Thumb styling

Let's begin by putting some size and border on the thumb:

slider.component.scss

input[type=range] {
  appearance: none;
  background: transparent;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 11px;
    height: 18px;
    border: 1px solid black;
  }
}

The thumb seems to have the correct size, but on Silverlight the border was gray, not black. Change the border color and add round corners while doing it:

slider.component.scss

input[type=range] {
  appearance: none;
  background: transparent;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 11px;
    height: 18px;
    border: 1px solid #617584;  // Gray solid color
    border-radius: 2px;  // Round corners
  }
}

The thumb border on Silverlight was a linear gradient, but CSS rules don't mix well when trying to use linear gradient borders and border-radius. There are tricks to accomplish this, but the CSS gets complex and messy (check here if you feel like trying). For this guide the round border was preferred over the linear gradient, so a gray solid color was picked for the border.

Now let's fill the thumb. Add a background rule with a linear gradient to the thumb selector:

slider.component.scss

input[type=range] {
  appearance: none;
  background: transparent;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 11px;
    height: 18px;
    border: 1px solid #617584;
    border-radius: 2px;
    background: linear-gradient(#fdfdfd, #ced4d9);  // Gray gradient fill
  }
}

The thumb's appearance is closer to Silverlight now. One last detail: the white border surrounding the thumb filling. Use a box-shadow rule to create an effect similar to the white border:

slider.component.scss

input[type=range] {
  appearance: none;
  background: transparent;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 11px;
    height: 18px;
    border: 1px solid #617584;
    border-radius: 2px;
    background: linear-gradient(#fdfdfd, #ced4d9);
    box-shadow: inset 0px 0px 0px 1px white;  // White inner border
  }
}

That is a really Silverlight looking thumb! Even on close up they seem similar:

Now let's style the track.

Track styling

Styling the track should be easier, as there are no color gradients. Let's start with the gray border:

slider.component.scss

input[type=range] {
  ...
  &::-webkit-slider-thumb {
    ...
  }
  &::-webkit-slider-runnable-track {
    appearance: none;  // remove default style
    width: 100%;
    height: 3px;
    border: 1px solid #a3aeb9; // Gray solid border
  }
}

The ::-webkit-slider-runnable-track pseudo-element selector will select the tract part of the slider, but only on Chrome based browsers. The appearance rule will remove any default style from the track. width is set to 100% to make sure that the track cover the full width of the slider. height is set to 3px to match Silverlight default slider height. And the border is set to a solid gray color.

The track border seems OK, but the thumb has moved downwards. This can be fixed by moving the thumb up with margin-top. Also let's put round borders on the track:

slider.component.scss

input[type=range] {
  ...
  &::-webkit-slider-thumb {
    ...
    margin-top: -8px;  // Move the thump up
  }
  &::-webkit-slider-runnable-track {
    appearance: none;
    width: 100%;
    height: 3px;
    border: 1px solid #a3aeb9;
    border-radius: 1.5px;  // Round borders
  }
}

The thumb is in the correct position, and the track has round borders. The only detail left is the track fill color. Set it with a background rule:

slider.component.scss

input[type=range] {
  ...
  &::-webkit-slider-runnable-track {
    appearance: none;
    width: 100%;
    height: 3px;
    border: 1px solid #a3aeb9;
    border-radius: 1.5px;
    background: #e6eff7;  // Light gray background
  }
}

The change is subtle, but necessary. On close up inspection, Silverlight and migrated tracks look very similar:

Lets see how the slider looks on different browsers:

Browser

Slider Look

Chrome (v. 105.0.5195.127)

Edge (v. 105.0.1343.50)

Firefox (v. 105.0.1)

It is not surprise that the slider renders correctly on Edge, because it shares the same engine as Chrome. But on Firefox the slider look is a mess.

Styling on Firefox

The styling on Firefox can be fixed by using the correct pseudo-element selectors: ::-moz-range-thumb for the thumb, and ::-moz-range-track for the track. Then the same rules are used inside Firefox pseudo-element selectors:

slider.component.scss

input[type=range] {
  ...
  &::-moz-range-thumb {
    appearance: none;
    width: 11px;
    height: 18px;
    border: 1px solid #617584;
    border-radius: 2px;
    background: linear-gradient(#fdfdfd, #ced4d9);
    box-shadow: inset 0px 0px 0px 1px white;
    margin-top: -8px;
  }
  &::-moz-range-track {
    appearance: none;
    width: 100%;
    height: 3px;
    border: 1px solid #a3aeb9;
    border-radius: 1.5px;
    background: #e6eff7;
  }
}

The slider looks kind of Silverlight, but seems puffy. Let's take a closer look:

Indeed, the Firefox thumb is a couple pixels wider and taller than Chrome thumb. The track is also taller. This can be fixed by adjusting a little bit the sizes on the Firefox rules:

slider.component.scss

input[type=range] {
  ...
  &::-moz-range-thumb {
    appearance: none;
    width: 9px;  // Reduced 2 pixels
    height: 16px;  // Reduced 2 pixels
    border: 1px solid #617584;
    border-radius: 2px;
    background: linear-gradient(#fdfdfd, #ced4d9);
    box-shadow: inset 0px 0px 0px 1px white;
    margin-top: -8px;
  }
  &::-moz-range-track {
    appearance: none;
    width: 100%;
    height: 1px;  // Reduced 2 pixels
    border: 1px solid #a3aeb9;
    border-radius: 1.5px;
    background: #e6eff7;
  }
}

Now the slider looks like it did on Chrome and Edge.

The rules on the style sheet can be improved. It is not a good practice to repeat code (or rules), so let's use a couple of mixins to reduce rule duplication:

slider.component.scss

@mixin silver-thumb($width, $height) {
  appearance: none;
  width: $width;
  height: $height;
  border: 1px solid #617584;
  border-radius: 2px;
  background: linear-gradient(#fdfdfd, #ced4d9);
  box-shadow: inset 0px 0px 0px 1px white;
  margin-top: -8px;
}

@mixin silver-track($height) {
  appearance: none;
  width: 100%;
  height: $height;
  border: 1px solid #a3aeb9;
  border-radius: 1.5px;
  background: #e6eff7;
}

input[type=range] {
  appearance: none;
  background: transparent;

  &::-webkit-slider-thumb {
    @include silver-thumb(11px, 18px);
  }

  &::-webkit-slider-runnable-track {
    @include silver-track(3px);
  }

  &::-moz-range-thumb {
    @include silver-thumb(9px, 16px);
  }

  &::-moz-range-track {
    @include silver-track(1px);
  }
}

Browser

Slider Look

Chrome (v. 105.0.5195.127)

Edge (v. 105.0.1343.50)

Firefox (v. 105.0.1)

The slider now has a consistent appearance across browsers.

There are still some considerations to polish the slider appearance: color changes on mouse hover, color highlight when the thumb is being dragged, appearance when the slider got/lost focus. These issues are left as exercises to the reader.

Resources

PreviousHow to support Bindings NextHow to enable Control Templates in the migrated application

Last updated 3 years ago

Was this helpful?