Slider

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.

Example
In which year were you born?

source 
#include <Wt/WContainerWidget.h>
#include <Wt/WBreak.h>
#include <Wt/WSlider.h>
#include <Wt/WText.h>

auto container = std::make_unique<Wt::WContainerWidget>();

container->addNew<Wt::WText>("In which year were you born?");
container->addNew<Wt::WBreak>();

Wt::WSlider *slider = container->addNew<Wt::WSlider>();
slider->resize(500, 50);
slider->setTickPosition(Wt::WSlider::TickPosition::TicksAbove);
slider->setTickInterval(10);
slider->setMinimum(1910);
slider->setMaximum(2010);
slider->setValue(1960);

container->addNew<Wt::WBreak>();
Wt::WText *out =
    container->addNew<Wt::WText>();

slider->valueChanged().connect([=] {
    out->setText("I was born in the year " + slider->valueText() + ".");
});

Top

Vertical slider

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.

Example
How much does Wt increase your efficiency?

source 
#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() + "%!");
});

Top

Slider steps

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.

Example
Try to select '7'. I bet you can't.

source 
#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() + "'!");
});

Top