slider

Slider selector, defaults to a block-level element.

Properties

get • set • listen

Current value, default value: $10$.

Setting the value attribute will change the current value of the component. You can listen to changes in the current value via the on command, which will be triggered every time the current value changes.

set

Minimum value, default value: $0$.

set

Maximum value, default value: $100$.

set

If the value of the vertical attribute is true, the slider component will be displayed vertically; otherwise, it will be displayed horizontally. The default value is false.

CSS Specifications

Developers can adjust the appearance of the slider component via CSS.

Size Calculation

The default width and height of the slider are the same as the font size of the element, which is set by the font-size attribute (or can be inherited). The size of the progress can be customized via the width and height attributes.

CSS Properties

The following CSS attributes may be very useful:

• background-color can control the background color of the slider;
• color can control the progress bar color of the slider;
• border-radius can set the slider to have rounded corners; for example, 50% will produce a semi-circular border;

Other CSS properties may also be useful; for example, the border property can be used to set the border style.

CSS Pseudo-elements

value

This pseudo-element can define the style of the slider progress bar separately, excluding the background part. For example, the border-radius of the scrollbar background and the progress bar part can be set separately to achieve the effect where the outer border has rounded caps while the progress bar has straight caps.

slider {
  border-radius: 50%; /* Rounded corners for the scrollbar background */
}

slider::value {
  border-radius: 0; /* No rounded corners for the progress bar of the scrollbar */
}

thumb

The thumb pseudo-element is used to define the style of the slider thumb. By default, the slider does not include a handle; to display the handle, you must specify the width and height of the thumb element:

slider::thumb {
  width: 150%;
  height: 150%;
  border-radius: 50%;
}

Percentage units for width and height are calculated relative to the element's own dimensions. For a horizontal slider, the thumb's width and height are calculated as percentages based on the element's CSS height. For a vertical slider, the handle's width and height are calculated as percentages based on the element's CSS width property. For example, if the element's CSS is:

slider {
  width: 200px;
  height: 24px;
}

In this case, the width and height of the thumb corresponding to the slider::thumb above are both $24\rm{px} \times 150\% = 36\rm{px}$. The percentage size of the handle's border radius is calculated based on the handle's own dimensions. In this example, the calculated value for the 50% border radius of the thumb pseudo-element is $36\rm{px} \times 50\%=18\rm{px}$.

The thumb pseudo-element supports the border CSS property, but the border will not exceed the dimensions of the thumb pseudo-element.

CSS Examples

The following example demonstrates some methods for customizing the appearance of the progress bar via CSS.

Slider Styles480×180px

Loading emulator...

<div>
  <!-- Default style -->
  <slider ::value="value" />
  <!-- Flat-end progress bar style -->
  <slider class="flat" ::value="value" />
  <slider class="more-style" ::value="value" />
  <p>value: {{value}}</p>
</div>

div > * {
  margin: 8px;
  padding: 6px;
}

.flat::value {
  /* Set value border-radius to 0 for a square-end progress bar effect */
  border-radius: 0;
}

.more-style {
  /* Custom border-radius */
  border-radius: 30%;
  /* slider background color */
  background-color: #b3c5d7;
  /* slider foreground color */
  color: #b5179e;
  /* padding can adjust the margin of the slider foreground */
  padding: 6px;
  height: 1rem;
}

/* Define the scrollbar thumb style */
.more-style::thumb {
  width: 300%; /* Capsule-shaped thumb with a 2:1 aspect ratio */
  height: 150%;
  background-color: white;
  border: 4px solid #f3722c; /* Thumb border */
  border-radius: 50%;
}

export default {
  data: { value: 50 }
}