Data Inputs

    
<input type="range" data-name="slider" \>
    
    

Using with Data Displaying Controls

The data input mechanism is often used with a the data display mechanism to create dynamic data display.

    
<input type="range" data-name="slider" \>
<span data-value="slider"></span>
    
    

Toggle Buttons

The davinci HTML component provides a simple way to create a set of toggle buttons. To do so, add a data-group attribute to each button in the toggle group, with the same group name. The data-selected attribute specifies the CSS class to apply to the most recently clicked button. The data-value attribute will push the specified value into the global data cache when the button is pushed.

        
<style>
    .selected{
        color:black;
        background-color: white;
    }
</style>
<button class="btn-default btn-davinci" data-group="group1" data-selected="selected" data-name="btn" data-value="value1">push1</button>
<button class="btn-default btn-davinci" data-group="group1" data-selected="selected" data-name="btn" data-value="value2">push2</button>