npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

property-value-slider

v1.0.19

Published

HTML custom element. Insert a Slider to manipulate an object property value

Downloads

35

Readme

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>