GitHub/Basalt2
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
346ded1c896ee9bb77d2f9d3d4fb6d34436d12fd
Basalt2/docs/.vitepress/dist/assets/references_slider.md.b1c74022.js
Robert Jelic d0678d4378 Vitepress
2025-02-10 07:22:01 +01:00

26 lines
8.0 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as s,o as a,c as e,Q as n}from"./chunks/framework.4313453f.js";const u=JSON.parse('{"title":"Slider","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"references/slider.md","filePath":"references/slider.md","lastUpdated":null}'),l={name:"references/slider.md"},o=n(`<h1 id="slider" tabindex="-1">Slider <a class="header-anchor" href="#slider" aria-label="Permalink to &quot;Slider&quot;">​</a></h1><p>Sliders are objects that allow users to scroll vertically or horizontally, which in turn changes a value that you can access using the :getValue() method.</p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>knobSymbol</td><td>char</td><td>The character used to represent the knob on the slider.</td></tr><tr><td>knobBackground</td><td>color</td><td>Background color of the knob.</td></tr><tr><td>knobForeground</td><td>color</td><td>Foreground color of the knob.</td></tr><tr><td>bgSymbol</td><td>color</td><td>The character used to represent the slider&#39;s background track.</td></tr><tr><td>value</td><td>number</td><td>The current value the slider is set to.</td></tr><tr><td>minValue</td><td>number</td><td>The minimum value the slider can be set to.</td></tr><tr><td>maxValue</td><td>number</td><td>The maximum value the slider can be set to.</td></tr><tr><td>step</td><td>number</td><td>The incremental value by which the slider adjusts its value. For instance, a step of 10 on a 0-100 scale would allow values of 0, 10, 20, ... and so on.</td></tr></tbody></table><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><p>Here&#39;s a demonstration of how to create and utilize a Slider object within the Basalt framework:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">createFrame</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> aSlider </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addSlider</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Set properties for the slider</span></span>
<span class="line"><span style="color:#B392F0;">aSlider</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setMinValue</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">aSlider</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setMaxValue</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">100</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">aSlider</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setStep</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Increments of 5</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Add an event listener to the slider to fetch the value when changed</span></span>
<span class="line"><span style="color:#B392F0;">aSlider</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> selectedValue </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aSlider</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">getValue</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;The current value of the slider is: &quot; </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> selectedValue)</span></span>
<span class="line"><span style="color:#F97583;">end</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">createFrame</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> aSlider </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addSlider</span><span style="color:#24292E;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Set properties for the slider</span></span>
<span class="line"><span style="color:#6F42C1;">aSlider</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setMinValue</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">aSlider</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setMaxValue</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">100</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">aSlider</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setStep</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">5</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Increments of 5</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Add an event listener to the slider to fetch the value when changed</span></span>
<span class="line"><span style="color:#6F42C1;">aSlider</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">local</span><span style="color:#24292E;"> selectedValue </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aSlider</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">getValue</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;The current value of the slider is: &quot; </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> selectedValue)</span></span>
<span class="line"><span style="color:#D73A49;">end</span><span style="color:#24292E;">)</span></span></code></pre></div><p>n this example, when a user moves the slider, its value changes in increments of 5, and the selected value is printed out.</p>`,8),t=[o];function p(r,c,d,i,y,E){return a(),e("div",null,t)}const F=s(l,[["render",p]]);export{u as __pageData,F as default};
Reference in New Issue View Git Blame Copy Permalink