Skip to main content

Slider

The Slider control allows selecting a value from a specified range by dragging a thumb along the bar. You can adjust the configuration of the control: set the minimal and maximal values, choose the step between values, specify the current value and the width of the slider line. It is also possible to provide a label for a slider or render a disabled control.

Slider

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

Initialization​

To create a Select instance on a page, you need to complete two steps:

  • import the source file of the control on a page:
App.svelte
<script>
    import { Slider } from "wx-svelte-core";
</script>
  • use the <Slider> tag to initialize the control:
App.svelte
<Slider/>

Setting the value​

By default, the value of Slider is 0. To change the value of a slider, use the value property with the desired numeric value:

<Slider value={50}/>

Related sample: Slider

Getting the current value​

You can get the current Slider value. For this, you need to:

  • specify a variable that will contain the Slider value (it may contain the initial value):
<script>
    import { Slider } from "wx-svelte-core";

    let v1 = 50;
</script>
  • bind the variable to the value property of the control:
<Slider bind:value={v1} />

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

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

    let value = 50;
</script>

<Slider bind:value/>

After that each change of the slider position will update the value in the variable accordingly.

Related sample: Slider

Catching the change of the value​

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

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

<Slider 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 value selected in the slider. The received object may also contain the previously selected Slider value and input:true, if the Slider handle is being dragged.

Related sample: Slider

Specifying the max and min values​

You can specify the necessary maximal and minimal slider parameters via the max and min properties. The default values are 100 and 0, correspondingly.

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

Setting the step​

The step is the interval between slider values. You can adjust it with the help of the step property. The default value of the step is 0.

<Slider step={5} />

Setting the bar width​

The width of the slider bar is configurable. To change it, set the necessary value of the width property as a string. It works as the width CSS property and accepts the same values set as strings.

<Slider width={"300px"}/>

Adding a title​

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for a slider:

<Field label="Unset value" position="left" type="slider" let:id>
    <Slider {id} title="The default value is 0" />
</Field>

Slider title

Related sample: Slider

Adding a label​

Slider can have a text label next to the bar. It can be set through the label property of the control. In this case a label appears above the bar. Besides a simple text, you can display the current control's value in the label. For example:

<script>
    let value = 50;
</script>

<Slider label="Progress: {value}%" bind:value />

Slider with a default label

Related sample: Slider

Using the left-side label​

With the help of the label of the Field control you can place a label to the left of the slider. You need to take the following steps:

  • include the Field source file on a page, declare the <Field> tag and complete it with the necessary props:
    • add a desired label via the label property
    • set the type="slider" property for the Field component
    • set the position="left" property to place the label to the left of the slider
    • specify the id variable to bind the field to the slider control
<script>
    import { Slider, Field } from "wx-svelte-core";
</script>

<Field label="Unset value" position="left" type="slider" let:id>

After that, wrap the slider in question in the <Field> tags and specify the id property for the slider:

<Field label="Unset value" position="left" type="slider" let:id>
    <Slider {id} />
</Field>

Slider with a side label

Related sample: Slider

Setting the disabled state​

Whenever you need to render a disabled slider, you can do it with the help of the disabled property, as in:

<Slider label="Disabled slider" disabled={true}/>

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

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

Disabled Slider

Related sample: Slider