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