@lion/input-range NPM

Inputs >> Input Range >> Overview ||10

A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.

import { html } from '@lion/core';
import '@lion/input-range/define';

export const main = () => html`
  <lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
`;

Features

Based on our input.
Shows modelValue and unit above the range input.
Shows min and max value after the range input.
Can hide the min and max value via no-min-max-labels.
Makes use of formatNumber for formatting and parsing.

Installation

npm i --save @lion/input-range

import { LionInputRange } from '@lion/input-range';
// or
import '@lion/input-range/define';

input-range lion slider web-components

@lion/core @lion/input @lion/localize

@everything-registry/sub-chunk-551 @zalastax/nolb-_lio @backlight-dev/fine-faucet-r5cia.simba-kv9anepq @backlight-dev/another-one.simba-kvs6sh3m @backlight-dev/bespace.simba-kv9mge72 @backlight-dev/degree-undergo-gztam.simba-ldk6j2gd @backlight-dev/m4dz.simba @backlight-dev/phyum.phyum @backlight-dev/dtcg.simba-ktl6nkz3 @backlight-dev/sincere-response-8fi2r.simba-kzanpojj @backlight-dev/teste-comp.simba-l9x8ele4 @divriots/spooky @divriots/starter-simba @lion/form-integrations @lion/form-system

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago