# Vaadin `Slider`教程 > 原文： [http://zetcode.com/vaadin/slider/](http://zetcode.com/vaadin/slider/) Vaadin `Slider`教程顯示了如何使用 Vaadin `Slider`組件。 Vaadin 滑塊示例在標簽組件中顯示選定的值。 ## Vaadin Vaadin 是流行的 Java Web 開發框架。 Vaadin 用于構建單頁 Web 應用。 ## Vaadin `Slider` `Slider`是垂直或水平條，允許通過使用鼠標拖動條手柄在定義的范圍內選擇數值。 在拖動過程中，將顯示該值。 `Slider`的默認方向為水平，默認范圍為`0..100`。 ## Vaadin `Slider`示例 以下程序演示了 Vaadin 滑塊組件的用法。 從`Slider`中選擇的值顯示在標簽組件中。 NetBeans IDE 可用于輕松創建 Vaadin Web 應用。 我們需要安裝 NetBeans Vaadin 插件，然后創建一個新的 Vaadin Web 應用項目。 我們將使用`MyUI.java`文件。 `MyUI.java` ```java package com.zetcode.vaadinslider; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.Title; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.HasValue; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Label; import com.vaadin.ui.Slider; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; @Theme("mytheme") @Title("Vaadin Slider") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout verLayout = new VerticalLayout(); Label lbl = new Label(""); Slider slider = new Slider(); slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> { Double val = event.getValue(); lbl.setValue(String.valueOf(val)); }); verLayout.addComponents(slider, lbl); verLayout.setSpacing(true); setContent(verLayout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` `MyUI`是應用入口點。 在這里，我們創建`Slider`組件。 ```java Label lbl = new Label(""); ``` 這是`Label`組件，它不使用從滑塊中選擇的值。 ```java Slider slider = new Slider(); ``` 在默認的水平方向上會創建一個`Slider`組件。 ```java slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> { Double val = event.getValue(); lbl.setValue(String.valueOf(val)); }); ``` 使用`addValueChangeListener()`，我們為值更改添加了一個監聽器。 我們用`getValue()`方法獲得`Slider`的當前值。 檢索到的值通過`setValue()`方法設置為標簽。 ```java verLayout.addComponents(slider, lbl); verLayout.setSpacing(true); ``` 我們使用`addComponents()`方法將標簽和滑塊添加到布局管理器中。 組件之間的一些間距通過`setSpacing()`添加。 `mytheme.scss` ```java @import "../valo/valo.scss"; @mixin mytheme { @include valo; .v-slider { width: 20em } } ``` 我們增加`mytheme.scss`文件中`Slider`的寬度。  圖：Vaadin `Slider` 在本教程中，我們展示了如何使用 Vaadin `Slider`組件。 您可能也對相關教程感興趣： [Vaadin `ComboBox`教程](/vaadin/combobox/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin `TextArea`教程](/vaadin/textarea/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。