Counter

The Counter control is intended for selecting numbers. It includes an input for entering a number and a couple of buttons which are used for increasing/decreasing the entered numeric value. You can set the value of the counter, as well as the minimal and maximal values and specify the step of changing the value.

Related resources

• Get the widget by installing the wx-svelte-core package.
• Check Counter API Reference to see the list of configuration properties and events.
• Explore the samples to visualize the available features.

Initialization

To create a Counter instance on a page, you need to complete the following steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Counter } from "wx-svelte-core";
</script>

• use the <Counter> tag to initialize the control:

App.svelte

<Counter/>

A default counter is initialized with the minimal value 0 with no label.

Setting the value

On initialization a counter contains the minimal value 0. You can set a numeric value that will be rendered in the counter via the value API property.

<Counter value={10} />

Related sample: Counter

Getting the current value

You can get the current value of the Counter control. For this, you need to:

• declare a variable that will contain the input's value (it may contain the initial value):

<script>
    import { Counter } from "wx-svelte-core";

    let v1 = 5;
</script>

• bind the variable to the value property of the control:

<Counter bind:value={v1} />

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    import { Counter } from "wx-svelte-core";

    let value = 5;
</script>

<Counter bind:value />

After that the value assigned to the bound variable will be updated on each change of the value in the counter.

Related sample: Counter

Catching the change of the value

In case you need to catch the change of the value in the counter, you can do it by handling the change event. Inside the event you can get the number entered into the counter in the following way:

<script>
    function handleChange(ev){
        const newValue = ev.detail;
        console.log(newValue);
        // => {value: 2, input: true}
    }
</script>

<Counter on:change={handleChange}/>

The handler function of the change event takes the CustomEvent object as a parameter and in its detail property it contains an object with the number entered into the counter and input:true, if a number is being typed in the input.

Specifying the max and min values

You can specify the necessary maximal and minimal counter parameters via the max and min properties. The default minimal value is 0.

<Counter max={80} min={10}/>

Related sample: Counter

Setting the step

The step is the interval of increasing/decreasing the counter value by clicking the +/- buttons. You can adjust it with the help of the step property. The default value of the step is 1.

<Counter step={5} />

Related sample: Counter

Setting the read-only mode

When you want a counter to be active but inaccessible for editing, make use of the readonly property. The config has the boolean value, false by default. You can either set it to the true value or just specify the property without a value:

<Counter readonly={true}/> <!-- equals to <Counter readonly/> -->

Related sample: Counter

Setting the disabled state

Whenever you need to render a disabled counter, you can do it with the help of the disabled property set to true:

<Counter disabled={true}/>

It is also possible to set a counter to the disabled state by declaring the property with no value:

<Counter disabled /> <!-- equals to "disabled={true}" -->

Related sample: Counter

Adding a label

A default counter has no label. To provide a label for the Counter control, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and add the necessary props:
  • add a desired label via the label property
  • optionally, set the position="left" property to place the label to the left of the input field
  • specify the id variable to bind the field and counter controls

<script>
    import { Counter, Field } from "wx-svelte-core";
</script>

<Field label="Counter label" position="left" let:id>

Then wrap the Counter in question in the <Field> tags and specify the id property for the Counter control to link the controls:

<Field label="Counter label" position="left" let:id>
    <Counter {id} />
</Field>

Related sample: Counter

Styling a validation error

When you use a counter inside a form and a wrong value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value):

<Counter error={true}/> <!-- equals to <Counter error/> -->

the counter's border and the value become red.

To make the label red as well, use the error property of the Field control.

<script>
    import { Counter, Field } from "wx-svelte-core";
</script>

<Field label="Error" error let:id>
    <Counter error {id} />
</Field>

Related sample: Counter