Value marks with oh-slider?

Setup, Configuration and Use Widgets
1

I have several oh-slider-items with min and max defined.
This creates a slider widget with (I think) always 4 middle equi-distanced value marks.
These are often showing non-integer values.
Can I adapt the number of or display representation of the marks’ values so I can get rid of commas?
Can I inject marks of my own?

Think of a slider to define EV charge power.
It would for example need to have marks at 3.7, 11 and 22 kW (in Germany).

2

scaleSteps will set the number of marks used.

Not with any oh-slider properties. The f7-library automatically calculates the marks based on the scaleSteps value, but that will always be an even distribution. Unevenly distributed marks are not possible. Also, the f7 property for formatting (or modifying) the mark labels is set in the oh-slider vue file so the user can’t over-ride that.

There are some convoluted css hacks that you can use to suppress the default values and then insert your own using a stylesheet and even modify the distribution, but it is not pretty and at that point just finding a more appropriate component (radio buttons? dropdown input?) would be less hassle.

stylesheet: >
  .range-scale-step {
    font-size: 0;
  }
  .range-scale-step::after {
    font-size: var(--f7-range-scale-font-size);
  }
  .range-scale-step:nth-child(1) {
    display: none;
  }
  .range-scale-step:nth-child(2) {
    left: calc(3.7 / 25 * 100%) !important;
  }
  .range-scale-step:nth-child(2)::after {
    content: "3.7";
  }
  .range-scale-step:nth-child(3) {
    left: calc(11 / 25 * 100%) !important;
  }
  .range-scale-step:nth-child(3)::after {
    content: "11";
  }
  .range-scale-step:nth-child(4) {
    left: calc(22 / 25 * 100%) !important;
  }
  .range-scale-step:nth-child(4)::after {
    content: "22";
  }
  .range-scale-step:nth-child(5) {
    display: none;
  }

image

2 Likes