Range support with a number?

[BKeyport]

I'd like to use ranges for my months fields, per the instruction on https://github.com/jsonform/jsonform/wiki#fields-range

I've got it set up like this:

from schema section -

"startMonth": {
              "type": "integer",
              "minimum": "-12",
              "maximum": "12"              
            },

from form section -

   {
          "title": "startMonth",
          "key": "MMM-Multimonth.config.startMonth",
          "type": "range",
          "description": "What month do you want to start the calendar, in relation to current month"
        },

This results in a ranging slider, like I'd like, but no number to indicate what it means.

I'd rather have something like

(Manually edited, I'm no artist)

Is this something you can do, or do I need to modify my JSON?

[sdetweil]

I don't know. let me research it. another use does something like this. just don't know how

[sdetweil]

SO, its not 'easy'..
you have to create another field in the form (not in the data) (read only maybe) and then hook a bit of javascript to the slider
and when it changes, get its value and stuff it into the other field.

so the thing you would add is an onChange handler

"onChange": "(evt,node)=>{ all the js goes here... but we have access to jquery so its not too bad }"

i didn't know, my son taught me, in the developers window, console tab, you can use jquery to access/change the html document

so this other field needs an id
and then in jquery its
let slideval=$(evt.target).val(); $("#someid").html(slideval)

so it turns out to be
"onChange": "(evt,node)=>{let slideval=$(evt.target).val(); $('#someid').text(slideval)}"

on the slider form element

and to get the extra field, use the
"append":"<div id="someid" class="classname">"
to inject an html field
after the slider

[BKeyport]

yeah, and I understand very little of that.

[sdetweil]

so, under you slider element in the form

{
          "title": "startMonth",
          "key": "MMM-Multimonth.config.startMonth",
          "type": "range",
          "description": "What month do you want to start the calendar, in relation to current month",
          "append":"<div id="someid" class="classname">",
          "onChange": "(evt,node)=>{let slideval=$(evt.target).val(); $('#someid').text(slideval)}"
        },

then you can add some styles to the webform.css for the class classname (or whatever we call it)
this adds the display area at the end for the value
and add an onChange handler to get the slider value when it changes and stuff it into the display area

[BKeyport]

Got it to work, but not as I would have liked. It includes the description in the field, and don't show a number to start, nor does it show the number until you let go of the slider...

Released the schema without that for now. I'll play with it later when I've got more time to learn.

[sdetweil]

ok.. the browser has limited support for cool things.
no inital value.. yes.. I will look at options here.. its not a form field, so can't set it..

what do you mean 'includes the description"

you can do mouse clicks, keyup (not key down) or Change..

change is ONLY after you lose focus, 'commit' to the change..

keyup is good for words changing.. I use that in the instance labels

clicks.. for when things happens.. I use that when u add an entry to the instance array, and then i click the lower section to add one too..

[BKeyport]

The description shows up in the box for the number, rather than under the field.

Like I said, it's in my to-do pile... Anyone got climbing gear for that pile? 🤣

[sdetweil]

i know it doesn't make it any better, but I recreated on playground and see your point..

so I asked in jsonform..
jsonform/jsonform#365

they took it as an enhancement... (usually slow to post updates, this was same 24hours..)
I could create a new slider type.. but that seems more work than should be..

[sdetweil]

i understand the todo pile, mine has gone crazy lately too..

[sdetweil]

just fyi on your post to the jsonform issue. live-edit meams tracks changes as they happen, not at the end. if u have one of the multiple modules change the label and watch the title above the instance

[sdetweil]

to test this

with already installed module

npm uninstall jsonform
npm install https://github.com/jsonform/jsonform.git

on new module install , (temporary)

git clone this module
edit the package.json file
change the line for jsonform in the dependencies to 
"jsonform":"git+https://github.com/jsonform/jsonform.git"
then npm install

then in your range form element, add "htmlClass":"some_unique_classname"
and "indicator":true

then in the webform.css
.some_unique_class_name .range-value {
whatever styling u want...
}

you can also do ALL range-value with
.range-value {
....
}

but that whacks every bodies

if U find one that works.. I will add it to the webform.css, and all range-value will be like that
so maybe everyone doesn't have to create the definition and edit the css file..(maybe I need a custom.css too!)

[sdetweil]

this is still change on letup on the mouse, not live (with keyboard it would be live I think )

[BKeyport]

actually, it's live this way:

{
          "title": "startMonth",
          "key": "MMM-Multimonth.config.startMonth",
          "type": "range",
          "description": "What month do you want to start the calendar, in relation to current month",
          "htmlClass":"some_unique_classname",
          "indicator":true
        },

[BKeyport]

Now just gotta learn how to CSS it into what I want. :)

[sdetweil]

remember that you can open the dev console and find the element and fiddle with its css right there
then u can copy/paste that into a css file..

[BKeyport]

I didn't actually know you could fiddle with CSS like that... Interesting.

I've not really fiddled with CSS too much - as an example, The multimonth module was re-worked by someone to use CSS, I'm still learning there..

[sdetweil]

my go to
https://www.w3schools.com/cssref/css_selectors.asp
https://cheatography.com/davechild/cheat-sheets/css2/
and a deep pile of stuff to dig thru, but has focus on all kinds of things
box, flex, animation,
https://bashooka.com/freebie/web-design-development-cheatsheets/

[sdetweil]

the big picture
you SELECT some elements (ALWAYS multiple)

then apply styles to them

[sdetweil]

also topic on dev console
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1624503465689

[sdetweil]

AND I have added support for extensions, a data converter for objects that don't work with native JS definitions.. (compliments as an example) and module specific form css in the latest release