Wt Widget Gallery

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

Native slider

You can use a native HTML5 slider by using setNativeControl(true). This allow the user to use arrow keys to change the value of the slider. However this does not support setTickPosition() and setTickLength().

Example

What is your favorite odd number?

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>("What is your favorite odd number?");
container->addNew<Wt::WBreak>();

Wt::WSlider *slider = container->addNew<Wt::WSlider>();
slider->resize(300, 50);
slider->setNativeControl(true);
slider->setTickInterval(10);
slider->setRange(1, 99);
slider->setStep(2);

container->addNew<Wt::WBreak>();
Wt::WText *out = container->addNew<Wt::WText>();
out->setMargin(10, Wt::Side::Left);

slider->valueChanged().connect([=] {
    out->setText("So your favorite odd number is " +
                 slider->valueText() + " !");
});

Top