property-value-slider

property-value-slider

Creates a HTML custom element. In the Element is a slider. With this slider you can change a propery value of an HTMLElement. I use it to explore some aspects of CSS.

params

destId (string, optional)

Id of the HTMLElement with the property to be changed. Element has to be in normal DOM not shadow

destPropName (string)

Name of the property to be changed.

destPropUnit (string, optional)

The unit of the property value. It is added to the destPropName. If the unit is 'contentLength', the slider adds random word. In this case the slider value is the count of chars.

destPropChildSelector (string, optional)

If the custom element is bound (s. destId), then a property (or sub-property) of that element is usually set. But if you also pass "destPropChildSelector" then you can set properties of elements which are children (need not be direct children) of this element. The selector for the "querySelectorAll" method is expected as the value. For example, if you want to customize all children that have the CSS class "flex-item" then you have to use ".flex-item" as the value.

hideNr (no value, optional)

Without this Parameter two numbers are insert right to the slider. The first shows the current value. The second the max value. A click on this numbers open an Dialog zu change the value. If "hideNr" is set, then the numbers are not apear and you can't change the min/max values on the fly. This parameter is new in 1.0.5. Before the parameter "showNr" exists.

min (integer, optional)

The min value the slider returns Standard: 1

max (integer, optional)

The max value the slider returns Standard: 100

startValue (integer, optional)

The start value for the property. This value is set once at the beginning.

contentType (string, optional)

Is only relevant, if the parameter destPropUnit === "contentLength". There are three valid values:

• "new" - a new LOREM text is generated, when you change the length of the content with the slider
• "same" - a the start a LOREN text ist generated. If you grow the length, then you get allways the same text
• "fix" - in this case, you get a part of a fix defined Text. This option is usefull, if you want the same content in different . In this case the text is limited to 1000 chars. The default value is "same".

Without this parameter a fix LOREM text ist created at startup. If the parameter "newContent" is set, every time you change the size of the content a new random LOREM is created to fill the content. So every time you change the lenght you get a new Text.

hideLabel (boolean, optional)

Without this Parameter a label is draw on the left side of the slider. It will show the "destId"."destPropName" ("destPropUnit").

caption (string, optional)

Normally, the identifier, which is to the left of the slider, is made up of: '"destPropName" and "destPropUnit". If the "caption" attribute is passed, then this is used instead. The attribute should be passed even if the slider is not directly bound to an object.

checked || unchecked (no value, optional)

If one of the two is passed, then a checkbox is set at the beginning of the slider. The values of the bound element (s. destId) are then only changed if the checkbox is set. If the checkbox is cleared, then the value of the bound attribute will default to ''. This resets all style attributes. However, if the slider controls a non-style attribute, you can use the "resetTo" attribute to transfer the value to which it is reset. The event changeVal is sent regardless of the status of the checkbox. However, the "checked" property is still returned in event.detail. This is true if either no checkbox is displayed at all and if it is checked.

resetTo (string, optioanl)

This attribute is only relevant if the attribute "checked" or "unchecked" is also passed. It determines what value the bound attribute (s. destId, destPropertyName) will be reset to when the checkbox is reset. The default is a empty string '', that is fine for style properties.

Example

<prop-val-slider>
    id="range-div-test" 
    destId="div-test" 
    destPropName="style.fontSize" 
    destPropUnit="px"
    min="1" 
    max="40" 
    startValue="14">
</prop-val-slider>
<div id="div-test">The font size of this div is controled by the slider</div>