A WSlider is a horizontal or vertical linear control with which you can set an integer value by moving an indicator within a particular range. You can also click on a point on the slider to change the value.
The default size is 150 x 50 pixels for a horizontal slider, and 50 x 150
pixels for a vertical slider. The slider size cannot be set explicitly by
a CSS style sheet. You should use resize()
or a layout manager
for that purpose.
You can create a vertical slider using setOrientation()
with the
parameter orientation
set to Vertical on a default horizontal
slider like in the above example or using a more specialized constructor.
#include <Wt/WBreak.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WSlider.h>
#include <Wt/WText.h>
auto container = std::make_unique<Wt::WContainerWidget>();
container->addNew<Wt::WText>("How much does Wt increase your efficiency?");
container->addNew<Wt::WBreak>();
Wt::WSlider *verticalSlider = container->addNew<Wt::WSlider>(Wt::Orientation::Vertical);
verticalSlider->resize(50, 150);
verticalSlider->setTickPosition(Wt::WSlider::TicksBothSides);
verticalSlider->setRange(5, 50);
container->addNew<Wt::WBreak>();
Wt::WText *out = container->addNew<Wt::WText>();
out->setMargin(10, Wt::Side::Left);
verticalSlider->valueChanged().connect([=] {
out->setText("Currenly, my efficiency increased " +
verticalSlider->valueText() + "%!");
});
A slider is customizable in that its size of steps can be specified. The steps
define how much the value of a slider changed with each interaction.
For example, if set to 1
, dragging the slider slightly to the left or
right will decrease of increase its value by 1
.
#include <Wt/WBreak.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WSlider.h>
#include <Wt/WText.h>
auto container = std::make_unique<Wt::WContainerWidget>();
container->addNew<Wt::WText>("Try to select '7'. I bet you can't.");
container->addNew<Wt::WBreak>();
Wt::WSlider *slider = container->addNew<Wt::WSlider>();
slider->resize(300, 50);
slider->setTickPosition(Wt::WSlider::TicksBothSides);
slider->setRange(0, 10);
slider->setStep(3);
container->addNew<Wt::WBreak>();
Wt::WText *out = container->addNew<Wt::WText>();
out->setMargin(10, Wt::Side::Left);
slider->valueChanged().connect([=] {
out->setText("That's a failure, you selected: '" +
slider->valueText() + "'!");
});