jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions
home-assistant.github.io/components/input_slider/index.html
Travis CI 67179bf8fe Site updated at 2017-03-18 17:12:07 UTC
2017-03-18 17:12:07 +00:00

297 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Input Slider - Home Assistant</title>
<meta name="author" content="Home Assistant">
<meta name="description" content="Instructions how to integrate the Input Slider component into Home Assistant.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/components/input_slider/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Input Slider">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/components/input_slider/">
<meta property="og:type" content="article">
<meta property="og:description" content="Instructions how to integrate the Input Slider component into Home Assistant.">
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Input Slider">
<meta name="twitter:description" content="Instructions how to integrate the Input Slider component into Home Assistant.">
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet">
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
<link rel='shortcut icon' href='/images/favicon.ico' />
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
</head>
<body >
<header>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="/" class="site-title">
<img width='40' src='/demo/favicon-192x192.png'>
<span>Home Assistant</span>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/components/">Components</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/cookbook/">Examples</a></li>
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="grid-wrapper">
<div class="grid grid-center">
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<article class="page">
<header>
<h1 class="title indent">
Input Slider
</h1>
</header>
<hr class="divider">
<p>The <code class="highlighter-rouge">input_slider</code> component allows the user to define values that can be controlled via the frontend and can be used within conditions of automation. Changes to the slider generate state events. These state events can be utilized as <code class="highlighter-rouge">automation</code> triggers as well.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">input_slider</span><span class="pi">:</span>
<span class="s">slider1</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Slider 1</span>
<span class="s">initial</span><span class="pi">:</span> <span class="s">30</span>
<span class="s">min</span><span class="pi">:</span> <span class="s">-20</span>
<span class="s">max</span><span class="pi">:</span> <span class="s">35</span>
<span class="s">step</span><span class="pi">:</span> <span class="s">1</span>
</code></pre>
</div>
<p>Configuration variables:</p>
<ul>
<li><strong>[alias]</strong> (<em>Required</em>): Alias for the slider input.</li>
<li><strong>min</strong> (<em>Required</em>): Minimum value for the slider.</li>
<li><strong>max</strong> (<em>Required</em>): Maximum value for the slider.</li>
<li><strong>name</strong> (<em>Optional</em>): Friendly name of the slider input.</li>
<li><strong>initial</strong> (<em>Optional</em>): Initial value when Home Assistant starts.</li>
<li><strong>step</strong> (<em>Optional</em>): Step value for the slider.</li>
</ul>
<h2><a class="title-link" name="automation-examples" href="#automation-examples"></a> Automation Examples</h2>
<p>Here’s an example of <code class="highlighter-rouge">input_slider</code> being used as a trigger in an automation.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code>
<span class="c1"># Example configuration.yaml entry using 'input_slider' as a trigger in an automation</span>
<span class="c1"># Define input_slider</span>
<span class="s">input_slider</span><span class="pi">:</span>
<span class="s">bedroom_brightness</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Brightness</span>
<span class="s">initial</span><span class="pi">:</span> <span class="s">254</span>
<span class="s">min</span><span class="pi">:</span> <span class="s">0</span>
<span class="s">max</span><span class="pi">:</span> <span class="s">254</span>
<span class="s">step</span><span class="pi">:</span> <span class="s">1</span>
<span class="c1"># Automation. </span>
<span class="s">automation</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Bedroom Light - Adjust Brightness</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">state</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_slider.bedroom_brightness</span>
<span class="s">action</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">service</span><span class="pi">:</span> <span class="s">light.turn_on</span>
<span class="c1"># Note the use of 'data_template:' below rather than the normal 'data:' if you weren't using an input variable</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">light.bedroom</span>
<span class="s">brightness</span><span class="pi">:</span> <span class="s1">'</span><span class="s">{{</span><span class="nv"> </span><span class="s">trigger.to_state.state</span><span class="nv"> </span><span class="s">|</span><span class="nv"> </span><span class="s">int</span><span class="nv"> </span><span class="s">}}'</span>
</code></pre>
</div>
<p>Another code example using <code class="highlighter-rouge">input_slider</code>, this time being used in an action in an automation.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code>
<span class="c1"># Example configuration.yaml entry using 'input_slider' in an action in an automation</span>
<span class="c1"># Define 'input_select'</span>
<span class="s">input_select</span><span class="pi">:</span>
<span class="s">scene_bedroom</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Scene</span>
<span class="s">options</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Select</span>
<span class="pi">-</span> <span class="s">Concentrate</span>
<span class="pi">-</span> <span class="s">Energize</span>
<span class="pi">-</span> <span class="s">Reading</span>
<span class="pi">-</span> <span class="s">Relax</span>
<span class="pi">-</span> <span class="s1">'</span><span class="s">OFF'</span>
<span class="s">initial</span><span class="pi">:</span> <span class="s1">'</span><span class="s">Select'</span>
<span class="c1"># Define input_slider</span>
<span class="s">input_slider</span><span class="pi">:</span>
<span class="s">bedroom_brightness</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Brightness</span>
<span class="s">initial</span><span class="pi">:</span> <span class="s">254</span>
<span class="s">min</span><span class="pi">:</span> <span class="s">0</span>
<span class="s">max</span><span class="pi">:</span> <span class="s">254</span>
<span class="s">step</span><span class="pi">:</span> <span class="s">1</span>
<span class="c1"># Automation. </span>
<span class="s">automation</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Bedroom Light - Custom</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">state</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_select.scene_bedroom</span>
<span class="s">to</span><span class="pi">:</span> <span class="s">CUSTOM</span>
<span class="s">action</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">service</span><span class="pi">:</span> <span class="s">light.turn_on</span>
<span class="c1"># Again, note the use of 'data_template:' rather than the normal 'data:' if you weren't using an input variable.</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">light.bedroom</span>
<span class="s">brightness</span><span class="pi">:</span> <span class="s1">'</span><span class="s">{{</span><span class="nv"> </span><span class="s">states.input_slider.bedroom_brightness.state</span><span class="nv"> </span><span class="s">|</span><span class="nv"> </span><span class="s">int</span><span class="nv"> </span><span class="s">}}'</span>
</code></pre>
</div>
<p>Example of <code class="highlighter-rouge">input_slider</code> being used in a bidirectional manner, both being set by and controlled by an MQTT action in an automation.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code>
<span class="c1"># Example configuration.yaml entry using 'input_slider' in an action in an automation</span>
<span class="c1"># Define input_slider</span>
<span class="s">input_slider</span><span class="pi">:</span>
<span class="s">target_temp</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Target Heater Temperature Slider</span>
<span class="s">min</span><span class="pi">:</span> <span class="s">1</span>
<span class="s">max</span><span class="pi">:</span> <span class="s">30</span>
<span class="s">step</span><span class="pi">:</span> <span class="s">1</span>
<span class="s">unit_of_measurement</span><span class="pi">:</span> <span class="s">step</span>
<span class="s">icon</span><span class="pi">:</span> <span class="s">mdi:target</span>
<span class="c1"># Automation. </span>
<span class="c1"># This automation script runs when a value is received via MQTT on retained topic: setTemperature</span>
<span class="c1"># It sets the value slider on the GUI. This slides also had its own automation when the value is changed.</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Set temp slider</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">mqtt</span>
<span class="s">topic</span><span class="pi">:</span> <span class="s2">"</span><span class="s">setTemperature"</span>
<span class="c1"># entity_id: input_slider.target_temp</span>
<span class="s">action</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">input_slider.select_value</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_slider.target_temp</span>
<span class="s">value</span><span class="pi">:</span> <span class="s1">'</span><span class="s">{{</span><span class="nv"> </span><span class="s">trigger.payload}}'</span>
<span class="c1"># This automation script runs when the target temperature slider is moved.</span>
<span class="c1"># It publishes its value to the same MQTT topic it is also subscribed to.</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Temp slider moved</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">state</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_slider.target_temp</span>
<span class="s">action</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">mqtt.publish</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">topic</span><span class="pi">:</span> <span class="s2">"</span><span class="s">setTemperature"</span>
<span class="s">retain</span><span class="pi">:</span> <span class="s">true</span>
<span class="s">payload</span><span class="pi">:</span> <span class="s1">'</span><span class="s">{{</span><span class="nv"> </span><span class="s">states.input_slider.target_temp.state</span><span class="nv"> </span><span class="s">|</span><span class="nv"> </span><span class="s">int</span><span class="nv"> </span><span class="s">}}'</span>
</code></pre>
</div>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="aside-module grid__item one-whole lap-one-half">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_components/input_slider.markdown'>Edit this page on GitHub</a></div>
<div class='brand-logo-container section'>
<img src='/images/supported_brands/home-assistant.png' />
</div>
<div class='section'>
Introduced in release: 0.16
</div>
<div class='section'>
<h1 class="title delta">Category Automation</h1>
<ul class='divided'>
<li>
<a href='/components/alert/'>Alert</a>
</li>
<li>
<a href='/components/automation/'>Automation</a>
</li>
<li>
<a href='/components/switch.flux/'>Flux Light Adjustment</a>
</li>
<li>
<a href='/components/hdmi_cec/'>HDMI CEC</a>
</li>
<li>
<a href='/components/ifttt/'>IFTTT</a>
</li>
<li>
<a href='/components/input_boolean/'>Input Boolean</a>
</li>
<li>
<a href='/components/input_select/'>Input Select</a>
</li>
<li>
Input Slider
</li>
<li>
<a href='/components/keyboard/'>Keyboard</a>
</li>
<li>
<a href='/components/lirc/'>LIRC</a>
</li>
<li>
<a href='/components/device_sun_light_trigger/'>Presence based lights</a>
</li>
<li>
<a href='/components/proximity/'>Proximity</a>
</li>
<li>
<a href='/components/rest_command/'>RESTful Command</a>
</li>
<li>
<a href='/components/script/'>Scripts</a>
</li>
<li>
<a href='/components/shell_command/'>Shell command</a>
</li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<div class="copyright">
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a>.<br>
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
</div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
</div>
</div>
</footer>
<script>
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink