slider

Documentation

Overview

slider implements a material slider component.

See: https://material.io/components/web/catalog/input-controls/sliders/

Example

package main

import (
	"fmt"
	"log"

	"syscall/js"

	"github.com/vecty-components/material/components/internal/mdctest"
	"github.com/vecty-components/material/components/slider"
)

func main() {
	// Create a new instance of a material slider component.
	c := slider.New()
	printName(c)
	printState(c)
	c.Value = 10.0
	c.Min = 5.5
	c.Max = 50.0
	c.Step = 5.0
	c.Disabled = true
	printState(c)

	// Set up a DOM HTMLElement suitable for a slider.
	js.Global().Get("document").Get("body").Set("innerHTML",
		mdctest.HTML(c.Component().Type.MDCClassName))
	rootElem := js.Global().Get("document").Get("body").Get("firstElementChild")

	// Start the component, which associates it with an HTMLElement.
	err := c.Start(rootElem)
	if err != nil {
		log.Fatalf("Unable to start component %s: %v\n",
			c.Component().Type, err)
	}

	printState(c)
	c.Value = c.Value + 5
	c.Min = c.Min + 5
	c.Max = c.Max + 5
	c.Step = c.Step + 5
	c.Disabled = false
	printState(c)

	err = c.Stop()
	if err != nil {
		log.Fatalf("Unable to stop component %s: %v\n",
			c.Component().Type, err)
	}
	printState(c)

}

func printName(c *slider.S) {
	fmt.Printf("%s\n", c.Component().Type)
}

func printState(c *slider.S) {
	fmt.Println()
	fmt.Printf("[Go] Value: %v, Min: %v, Max %v, Step %v, Disabled: %v\n",
		c.Value, c.Min, c.Max, c.Step, c.Disabled)
	if !c.Component().Get("foundation_").IsUndefined() {
		fmt.Printf("[JS] Value: %v, Min: %v, Max %v, Step %v, Disabled: %v\n",
			c.Component().Get("foundation_").Get("value_"),
			c.Component().Get("foundation_").Get("min_"),
			c.Component().Get("foundation_").Get("max_"),
			c.Component().Get("foundation_").Get("step_"),
			c.Component().Get("foundation_").Get("disabled_"))
	}
}

func init() {
	// We emulate a DOM here since tests run in NodeJS.
	// Not needed when running in a browser.
	err := mdctest.Init()
	if err != nil {
		log.Fatalf("Unable to setup test environment: %v", err)
	}
}

Output:

MDCSlider

[Go] Value: 0, Min: 0, Max 0, Step 0, Disabled: false

[Go] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true

[Go] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true
[JS] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true

[Go] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false
[JS] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false

[Go] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false
[JS] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false

Index

• type S
  • func New() *S
  • func (c *S) Component() *base.Component
  • func (s *S) Layout() error
  • func (c *S) Start(rootElem js.Value) error
  • func (c *S) StateMap() base.StateMap
  • func (c *S) Stop() error

Examples

• Package

Types

type S

type S struct {

	// The current value of the slider. Changing this will update the slider’s
	// value.
	Value float64 `js:"value"`

	// The minimum value the slider can have. Values set programmatically will
	// be clamped to this minimum value. Changing this property will update the
	// slider’s value if it is lower than the new minimum.
	Min float64 `js:"min"`

	// The maximum value a slider can have. Values set programmatically will be
	// clamped to this maximum value. Changing this property will update the
	// slider’s value if it is greater than the new maximum.
	Max float64 `js:"max"`

	// Specifies the increments at which a slider value can be set. Can be any
	// positive number, or 0 for no step. Changing this property will update the
	// slider’s value to be quantized along the new step increments.
	Step float64 `js:"step"`

	// Whether or not the slider is disabled.
	Disabled bool `js:"disabled"`
	// contains filtered or unexported fields
}

S is a material slider component.

func New

func New() *S

New returns a new component.

func (*S) Component

func (c *S) Component() *base.Component

Component returns the component's underlying base.Component.

func (*S) Layout

func (s *S) Layout() error

Layout recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize).

func (*S) Start

func (c *S) Start(rootElem js.Value) error

Start initializes the component with an existing HTMLElement, rootElem. Start should only be used on a newly created component, or after calling Stop.

func (*S) StateMap

func (c *S) StateMap() base.StateMap

StateMap implements the base.StateMapper interface.

func (*S) Stop

func (c *S) Stop() error

Stop removes the component's association with its HTMLElement and cleans up event listeners, etc.