Allow range when editing a number field

Created on 4 September 2014, over 10 years ago
Updated 21 April 2023, over 1 year ago

Problem/Motivation

When editing a numeric field there is no option to select how to display the field.

We should be able to choose between 'number' and 'range'.

Proposed resolution

  1. Add an <output /> field like <input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)"><output for=fader id=volume>50</output> with a script like <script>function outputUpdate(vol) { document.querySelector('#volume').value = vol;}</script>
  2. Add option for <datalist />

How to test

  1. Add "Number (integer)" field
  2. Set Form display to "Range field"
  3. Note 'No placeholder' text (should not be displayed or entered)
  4. Configure Form field
  5. Check 'Display current value' (this is not always needed depending on theming)
  6. Note missing <datalist /> list options. See remaining tasks.

Remaining tasks

  • The value(s) must be visible while changing. There is no min, max or current visible. Where to put the javascript for updating this <output /> element. Note this is solved with a working <datalist/> as that provides labels.
  • Fix hardcoded <output/> tag from template file.
  • Fix placeholder settings as these are not needed
  • Do we want <datalist /> as w3c html5 forms input range which gives at least some stops. It should support labels but currently not on Mac+Chrome/Firefox/Safari

User interface changes

API changes

Feature request
Status

Needs work

Version

10.1

Component
Field 

Last updated about 4 hours ago

Created by

🇳🇱Netherlands clemens.tolboom Groningen, 🇳🇱/🇪🇺

Live updates comments and jobs are added and updated live.
  • Needs usability review

    Used to alert the usability topic maintainer(s) that an issue significantly affects (or has the potential to affect) the usability of Drupal, and their signoff is needed. When adding this tag, make it easy to review the issue. Make sure the issue summary describes the problem and the proposed solution. Screenshots usually help a lot! To get sign-off on issues with the "Needs usability review" tag, post about them in the #ux channel on Drupal Slack, and/or attend a UX meeting to demo the patch and get direct feedback from designers/UX folks/product management on next steps. If an issue represents a significant new feature, UI change, or change to the general "user experience" of Drupal, use Needs product manager review instead. See the scope of responsibilities for product managers.

  • Needs change record

    A change record needs to be drafted before an issue is committed. Note: Change records used to be called change notifications.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇧🇷Brazil joaopauloc.dev

    Patch #31 was applied and works fine.
    See all attachments for evidence.

    Hey@xjm, I updated this issue to reviewed and tested by the community status, after @bojhan comment on #21.
    Should we keep this status or do we need to wait for another approval?
    Thanks.

  • Status changed to Needs work almost 2 years ago
  • The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • Assigned to joaopauloc.dev
  • 🇧🇷Brazil joaopauloc.dev

    On it, fixing the php cs and adding unit test to new widget created

  • @joaopaulocdev opened merge request.
  • Issue was unassigned.
  • Status changed to Needs review almost 2 years ago
  • Status changed to Needs work almost 2 years ago
  • 🇺🇸United States smustgrave

    This still needs a usability review but just from my observations

    There is no way to tell the current value.
    When I saved this page the view mode said the value was 66 but I had 0 idea.

  • Assigned to camchandler98
  • 🇺🇸United States camchandler98

    I thought adding a display for the slider would be just quickly editing the twig template but boy was I wrong. Long story short I ended up twig debugging and saw that the range input is still using the default input template . I think I know what to do now though so I will work on it.

Production build 0.71.5 2024