@amauta/input-range NPM

Amauta Input Range

Web component

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	`false`
`inputId`	`input_id`	`string`	`''`
`label`	`label`	`string`	`''`
`max`	`max`	`number`	`5`
`min`	`min`	`number`	`0`
`paramClass`	`param_class`	`any`	`{ containerClass: 'container-class', labelClass: 'label-class', containerInputClass: 'container-input-class', inputClass: 'input-class' }`
`readonly`	`readonly`	`boolean`	`false`
`step`	`step`	`number`	`0.5`
`typeValidate`	`type_validate`	`string`	`''`
`validForm`	`valid_form`	`boolean`	`false`
`value`	`value`	`any`	`0`

Events

Event	Description	Type
`eventOnChange`		`CustomEvent<any>`

Built with StencilJS

Install web component in Angular project

Run npm i @amauta/input-range

Put a script tag in main.js file

import * as inputRangeCustomElements from '@iparadise71/input-range/loader';

// @ts-ignore
inputRangeCustomElements.defineCustomElements().catch(err => console.error(err));

Use in components html

<amauta-input-range 
    input_id='{input}'
    label="Select range"
    readonly='false'
    disabled='false'
    min='0'
    max='5'
    step='0.5'
    value='2.5'
    (eventOnChange)="myFunction($event)"
>
</amauta-input-range>

@stencil/core

@infinitebrahmanuniverse/nolb-_ama @everything-registry/sub-chunk-61

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago