idyll-langidyll
DocsTutorialsGalleryEditor
menu

Overview

  • Introduction
  • Getting started
  • Markup syntax
  • HTML tags
  • Options and styles
  • Plugin system
  • Multipage template

Interactivity

  • Built-in components
  • Using components from npm
  • Make your own component
  • Scrolling and Refs

Publishing

  • Deploying to the web
  • Embedding Idyll

Useful Links

  • Github
  • Chat
  • Twitter
  • Support Us
← Back

Range

This component displays a range slider.

Input:

[var name:"myVar" value:10 /]

[Range value:myVar min:0 max:100 /]
[Display value:myVar /]

Output:

Props

  • value number

    The value to display; if this is a variable, the variable will automatically be updated when the slider is moved.

    • Example: x
  • min number

    The minimum value.

    • Example: 0
  • max number

    The maximum value.

    • Example: 100
  • step number

    The granularity of the slider.

    • Example: 1
    • Default value: 1