Rangeslider

The gameface-rangeslider is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.

Installation #

npm i coherent-gameface-rangeslider

Usage with UMD: #

<script src="./node_modules/coherent-gameface-rangeslider/dist/rangeslider.production.min.js"></script>

• add the gameface-rangeslider component to your html:

<gameface-rangeslider></gameface-rangeslider>

This is all! Load the file in Gameface to see the rangeslider.

Usage with JavaScript: #

If you wish to import the RangeSlider using JavaScript you can remove the script tag and import it like this:

import { RangeSlider } from 'coherent-gameface-rangeslider';

or simply

import 'coherent-gameface-rangeslider';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

How to use #

To use simply add

<gameface-rangeslider></gameface-rangeslider>

to your html file.

Listening for slider update change #

To listen for changes in the rangeslider you can attach an event listener to the sliderUpdate event

const volumeControl = document.querySelector('.example-volume-control');

volumeControl.addEventListener('sliderUpdate', ({ detail }) => { // detail is the value returned by the rangeslider
    // Logic here
})

Rangeslider attributes #

You can use the following attributes to customize the rangeslider

Examples #

<gameface-rangeslider orientation="horizontal" min="56" max="255" grid thumb step="20"><gameface-rangeslider>

<gameface-rangeslider orientation="horizontal" min="56" max="255" grid thumb two-handles step="20"></gameface-rangeslider>

<gameface-rangeslider orientation="horizontal" grid thumb value="Hard" values='["Easy","Normal", "Hard", "Expert", "Nightmare"]' step="20"></gameface-rangeslider>

<gameface-rangeslider orientation="vertical" min="56" max="255" grid thumb step="20"><gameface-rangeslider>

Dynamic attributes (v.3.1.0) #

In version 3.1.0 are added the dynamic attributes of the rangeslider component. Each attribute from the table can now be changed via JavaScript or by changing the attribute value of the gameface-rangeslider element. You can also add new attributes to the rangeslider runtime. The component is watching for changes so runtime it can be configured to behave differently.

value #

You can set the value of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.value = ${newValue};
// or
rangeslider.setAttribute('value', ${newValue});

The newValue can be either a number or string when values attribute is set.

You can get the value of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.value);
// or
console.log(rangeslider.getAttribute('value'));

Behaviors #

If the newValue is invalid then the rangeslider is going to set the value to minimum.

• When the rangeslider works with number values (the values attribute is not set).

  • If the newValue is more that the maximum allowed then it will be set to maximum.
  • If the step attribute is used then setting the value is going to be pre-calculated to the next/previous value based on the step value. For example if the rangeslider has values from 0 to 100 and the step attribute value is 20 then setting value to 15 will be pre-calculated and set to 20. And if the value is 5 then will be set to 0.

• When the rangeslider works with values array (the values attribute is set).

  • You need to specify the newValue to be one from the values array. Otherwise it will be invalid and be set to the first value of the values array.

For rangeslider that has two-handles enabled, setting the value is not possible for now.

min/max #

The min and max attributes are working just when the values attribute is not used.

You can set them to the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.min = ${newValue}; // same for the `max`
// or
rangeslider.setAttribute('min', ${newValue}); // same for the `max`

The newValue should always be a number.

You can get the min or max of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.min);
// or
console.log(rangeslider.getAttribute('min'));

Behaviors #

min and max are not taking effect when values attribute is set!

Also when you change the min or max and the current value is less/greater than min/max it will be automatically be set to min/max value. This behavior works as well when the slider has two handles enabled by the two-handles attribute.

When the min or max are changed and if the grid of the rangeslider is enabled then it will be precalculated and re-rendered showing the new and true values of the slider.

step #

The step attribute is not taking effect when the values attribute is used.

You can set step to the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.step = ${newValue};
// or
rangeslider.setAttribute('step', ${newValue});

The newValue should always be a number.

You can get the step of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.step);
// or
console.log(rangeslider.getAttribute('step'));

Behaviors #

When the step is changed then the rangeslider will pre-calculate the current value to match the step conditions! This behavior works as well when the slider has two handles enabled by the two-handles attribute.

grid #

You can enable/disable the grid of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.grid = ${newValue};
// or
rangeslider.setAttribute('grid', ${newValue});

The newValue should always be a boolean(true or false).

You can get the grid of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.grid);
// or
console.log(rangeslider.getAttribute('grid'));

polsNumber #

You can set the pols number in the grid of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.polsNumber = ${newValue};
// or
rangeslider.setAttribute('pols-number', ${newValue});

The newValue should always be a number above 1

You can get the grid of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.polsNumber);
// or
console.log(rangeslider.getAttribute('pols-number'));

thumb #

You can enable/disable the thumb of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.thumb = ${newValue};
// or
rangeslider.setAttribute('thumb', ${newValue});

The newValue should always be a boolean(true or false).

You can get the thumb of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.grid);
// or
console.log(rangeslider.getAttribute('thumb'));

two-handles #

The two-handles attribute is not taking effect when values attribute is used.

You can enable/disable the two-handles of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.twoHandles = ${newValue};
// or
rangeslider.setAttribute('two-handles', ${newValue});

The newValue should always be a boolean(true or false).

You can get the two-handles of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.twoHandles);
// or
console.log(rangeslider.getAttribute('two-handles'));

Behaviors #

As the value is not taking effect when the two-handles is enabled then enabling it it will reset the current value to the min and max of the rangeslider. And if you disable the two-handles and there is a value it will be correctly set.

custom-handle, custom-handle-left, custom-handle-right #

The custom-handle attribute is not taking effect when two-handles attribute is used. The custom-handle-left and custom-handle-right attributes are not taking effect when two-handles attribute is not used.

You can retarget the custom handle of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.customHandle = ${newValue}; // works the same for the customHandleLeft and customHandleRight
// or
rangeslider.setAttribute('custom-handle', ${newValue}); // works the same for the custom-handle-left and custom-handle-right

The newValue should always be a string that represents a CSS selector (such as #my-target, .my-target-class, etc.).

You can get the custom handle/s DOM elements of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.customHandle); // works the same for the customHandleLeft and customHandleRight
// or
console.log(rangeslider.getAttribute('custom-handle')); // works the same for the custom-handle-left and custom-handle-right

Note that it will return the DOM element of the custom handle and not the selector!

Behaviors #

For now when the custom-handle/-left/-right are changed then the new target is not going to receive the value of the slider until it has not changed!

values #

You can add values of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.values = ${newValue};
// or
rangeslider.setAttribute('values', ${newValue}); // For example rangeslider.setAttribute('values', '["Easy", "Hard", "Expert"]')

The newValue should always be an array with string values.

You can get the values of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.values);
// or
console.log(rangeslider.getAttribute('values'));

Behaviors #

If values are set then the rangeslider is going to be re-rendered based on the added values.

orientation #

You can add orientation of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
rangeslider.orientation = ${newValue};
// or
rangeslider.setAttribute('orientation', ${newValue});

The newValue should always be either ‘horizontal’ or ‘vertical’. Any other value will fallback to ‘horizontal’.

You can get the orientation of the rangeslider by doing

const rangeslider = document.queryselector('gameface-rangeslider');
// either
console.log(rangeslider.orientation);
// or
console.log(rangeslider.getAttribute('orientation'));