Skip to content

Range inputs

Jump to bottom
RichardHerz edited this page Jul 11, 2017 · 15 revisions

RANGE INPUTS - SLIDERS

HTML range inputs = LiveCode scrollbar with style = scale

In HTML the "min" attribute value must always be less than the "max" attribute value. The relative orientation of the "min" and "max" values on the rendered web page can be changed by CSS transform rotation in the CSS file.

In LC, the startValue may be less than or greater than the endValue. The startValue is always on the left of horizontal scales and on the top of vertical scales. The relative orientation of the min and max values on the LC card can be changed by whether startValue is > or < the endValue.

After you make the settings in the project in LiveCode, the project takes care of making the HTML and CSS settings. The list of cases below is for making the appropriate settings in the project in LC.

Note that LC pageInc is not the same as HTML step attribute value. In LC, pageInc is the change in value when you click on the scrollbar off the thumb. In LC, when you drag the thumb, the value increments apparently with pixel resolution. In HTML, when you drag the thumb, the value increments with the step attribute value. In HTML, when you click off the thumb but on the range input, the value and the thumb jump to where you clicked.

SLIDER EVENTS

The event attributes to use depend on the browser. Oninput works to display value in display field when dragging slider thumb except on Windows Internet Explorer (haven't tested newest Win browser yet), where onchange works. One solution is to add both events in the html.

SLIDER POSTION

On Windows Internet Explorer (IE) browser, there is a default tooltip displayed during dragging but I haven't seen it show the correct value. To get rid of it, the code below is added automatically to the CSS file:

::-ms-tooltip {
  display: none;
}

Apparently, any position in the CSS file is OK. Even when made invisible, the tooltip takes up space and moves the actual slider down, so need to set slider so it shows well on all platforms - OR - add special -ms- height in CSS.

SLIDER CASES

Here are the four cases for horizontal and vertical scales/ranges/sliders:

CASE 1. Horizontal ranges with min value on left, max on right

  • You create these in the LC project with startValue < endValue (default)

  • The project exports these to HTML with min < max and no transform rotation.

CASE 2. Horizontal ranges with max value on left, min on right

  • You create these in the LC project with startValue > endValue

  • The project exports these to HTML with min < max and 180-degree CSS transform rotation.

CASE 3. Vertical ranges with min value on bottom, max on top

  • You create these in the LC project by making width < height and startValue > endValue

  • The project exports these to HTML with min < max and 270-degree CSS transform rotation

CASE 4. Vertical ranges with min value on top, max on bottom

  • You create these in the LC project by making width < height, and startValue < endValue (default)

  • The project exports these to HTML with min < max and 90-degree CSS transform rotation

Clone this wiki locally