UX friendly styling of ojs Inputs.range

[haraldgroven]

Description

I'm making Quarto dashboard with range sliders in a left navigation column using OJS code cells {ojs}.

But the default styling of Inputs.range is not particularly user friendly when the sliders have both a text label, input field and slider. Are there any recommended/simple settings for forcing the <input> tags on a new row so that labels become readable?

[cscheid]

This is admittedly a weak part of Quarto's styling system. Unfortunately, the best solution we can offer is for you to use your browser's DOM debugging tools to identify the classes being used, and for you to add CSS of your own.

[mcanouil]

@haraldgroven

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[GuillaumeChretienCerema]

Hello, Quarto with OJS is a really great setup — personally, I find that Observable Inputs' default CSS and Quarto's built-in grid system often combine nicely (not a weak part for me). For custom cases, could adding a class + custom CSS like the one below help ?

```{ojs}
//| echo: false
//| https://observablehq.com/@recifs/add-a-class-to-an-observable-input--support

viewof test= {
  const input = Inputs.range([0, 100], {
    label: "Veuillez sélectionner une valeur ci-dessous (version sur deux lignes)",
    step: 1
  });
  input.classList.add("label_above");
  return input;
}
```

```{=html}
<style>
/* LABEL ABOVE */
form.label_above {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 0.35rem;
}

form.label_above > label {
  width: auto;
  flex: 0 0 auto;
  padding-bottom: 0;
  margin: 0;
}

form.label_above > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
}

form.label_above input[type="number"] {
  width: 50px !important;
  flex: 0 0 50px;
}

form.label_above input[type="range"] {
  width: 150px !important;
  flex: 0 0 150px;
}
</style>
```