# 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/)。